Chrome扩展开发的简介与实战(2)

学习

优秀扩展介绍

crxMouse
商店地址

自定义扩展Icon的动作

按下Icon后，可以触发某些动作。或者打开一个弹出式的网页。

要追加这些操作，必须先申明，"Page Action" 或 "Browser Action"。
二者只能选一，不能都选。都不选就代表没有操作内容，这是允许的。

"Page Action" & "Browser Action"

两者差不多

都是指扩展的icon，差别不明显。但google对于两者的使用有一定的建议。具体参看两者各自的文档，有详细说明。

用一句话区别

其实两者的差别还是有点微妙，初期不宜展开。一定要用一句话区别的话，就是

只对少数网页敏感 --> Page Actions

对大多数网页都敏感 --> Browser Actions

例如：
1. 我不喜欢youtube网站的背景色，我希望自定义一下。因为这是对少数网页感兴趣，所以应该用"Page Action"。
2. 只要发现网页上有图片，我希望一键下载所有图片。因为这是对大多数网页感兴趣，所以应该用"Browser Action"

实战 2-1: 更改kintone的背景色

首先，由于是对少数网页敏感，所以我们选用Page Action。

code

manifest.json

{
    "name": "sample 3: action page",
    "version": "1.0",
    "description": "change kintone background color",
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "page_action": {
        "default_icon": "icon.png",
        "default_title": "change color"
    },
    "permissions": ["declarativeContent", "activeTab"],
    "manifest_version": 2
}

background.js

chrome.runtime.onInstalled.addListener(function() {
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
        chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [
                // When a page contains the 'cybozu.com/k/' url...
                new chrome.declarativeContent.PageStateMatcher({
                    pageUrl: { urlContains: 'cybozu.com/k/' },
                })
            ],
            // ... show the page action.
            actions: [new chrome.declarativeContent.ShowPageAction()]
        }]);
    });
});
chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript({
        code: 'document.body.style.backgroundColor="gray";document.getElementsByClassName("gaia-header-header")[0].style.backgroundColor="gray";'
    });
})

icon资源

功能

• 只有在含有 cybozu.com/k/ 的网页下才会点亮icon
• 按下icon后，改变kintone背景色

讲解

权限基础

manifest.json中

"permissions": ["declarativeContent", "activeTab"],

permissions: 表示我要申请权限。在chrome ext中很多动作都需要权限。没有权限是寸步难行。

申请权限时，我们遵循的原则是“够用即可”。只申请必要的权限，发现多余权限时要及时删除。

权限为什么不是越多越好？

权限越多，意味着能做的事越多，可能会产生以下后果

• 需要用户对你更高的信任度，如果在用户看来，你申请的权限和扩展的功能不匹配，用户会认为此扩展有可疑行径，从而拒绝安装。
• 更多权限也意味着发行时google更多的审查。也许你就过不了审核这一关了。

权限：declarativeContent

申明你的Page Action对于那些网页的url或网页中有某些特征（css特征等）的才会激活。

权限：activeTab

申明你对当前活动的tab具有操作权限。

在本例中，按下icon时改变背景色需要此项权限。

background中的操作

chrome.runtime.onInstalled.addListener(function() { // 安装时
    chrome.declarativeContent.onPageChanged.removeRules(undefined,  function() { // 删除规则
        chrome.declarativeContent.onPageChanged.addRules(...) // 增加规则
        }
    })
})

chrome.pageAction.onClicked.addListener(function(tab) { // 点击icon执行
    chrome.tabs.executeScript({
        code: 'document.body.style.backgroundColor="gray";document.getElementsByClassName("gaia-header-header")[0].style.backgroundColor="gray";'
    }); // 这里也可以是file来指定js,css文件
})

tips:找到画面元素的html代码的方法

• 找到开发者工具或者右键-->检查 (windows快捷键为F12)
• 点击选择元素按钮 (windows快捷键为ctrl+shift+c)
• 将鼠标放在你想查看的元素上

HomeWork

更改整体搜索框的背景色