Chrome插件开发总结

作者: 程序员小逗逼 | 来源:发表于2017-04-05 16:38 被阅读1613次

架构

总括：
- Manifest：程序清单
- Background：插件运行环境/主程序
- Pop up：弹出页面
- Content scripts：与浏览页面交互的脚本
Manifest
每一个扩展都有一个JSON格式的manifest文件，叫manifest.json，相当于程序清单，其中定义了插件的一些元数据等信息，示例如下：

{
  // 必须添加
  "manifest_version": 2, //固定的，定义manifest版本信息
  "name": "My Extension", //插件名称
  "version": "1.0", //插件本身的版本

  // 推荐添加
  "default_locale": "en",
  "description": "This is my first extension.", //插件的描述
  "icons": {...},

  //browser_action和page_action只能添加一个
  "browser_action": { //浏览器级别行为，所有页面均生效
        "default_icon": "cc.gif",//图标的图片
        "default_title": "Hello CC", //鼠标移到图标显示的文字 
        "default_popup": "popup.html" //单击图标后弹窗页面
    }, 
  "page_action":{ //页面级别的行为，只在特定页面下生效 
        "default_icon":{
            "24":"icon_24.png",
            "38":"icon_38.png"
            },
        "default_popup": "popup.html",
        "default_title":"MyTitle"
    },

  // 可选
  "author": ...,
  "automation": ...,   
  
  //background script即插件运行的环境
  "background":{
        "page":"background.html", //page和scripts只能设置一个   
        "persistent": false   
        
        //scripts定义一个脚本文件的数组，chrome会在扩展启动时自动创建一个包含所有指定脚本的页面
        // "scripts": ["js/jquery-1.9.1.min.js","js/background.js"]
    },
  "background_page": ...,
  "chrome_settings_overrides": {...},
  "chrome_ui_overrides": {
    "bookmarks_ui": {
      "remove_bookmark_shortcut": true,
      "remove_button": true
    }
  },
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  
  //定义对页面内容进行操作的脚本
  "content_scripts": [{  
         "matches": ["http://*/*","https://*/*"],//只在这些站点下 content_scripts会运行
         "js": ["js/jquery-1.9.1.min.js", "js/js.js"],   
         "run_at": "document_start",  //在document加载时执行该脚本，如果不指定，则在document加载完成后执行
    }] 
    
  "content_security_policy": "policyString",
  "converted_from_user_script": ...,
  "current_locale": ...,
  "devtools_page": "devtools.html",
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.example.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "http://path/to/homepage",
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  
  //数组，声明插件所需要的权限
  "permissions": [ 
        "http://*/", 
        "bookmarks", 
        "tabs", 
        "history",
        "activeTab",
        "storage"
    ], 
  "platforms": ...,
  "plugins": [...],
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "signature": ...,
  "spellcheck": ...,
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "version_name": "aString",
  "web_accessible_resources": [...]
}

Background Page
- background是插件的运行环境，姑且叫做主程序。一旦插件被启用，chrome就会为该插件开辟一个独立运行环境，用来执行background script。若设置了scripts字段，浏览器的扩展系统会自动根据scripts字段指定的所有js文件自动生成背景页。也可以直接page字段，指定背景页。两者只能设置一个。
- 一般情况下，我们会让将扩展的主要逻辑都放在 background 中比较便于管理。其它页面可以通过消息传递的机制与 background 进行通讯。理论上 content script 与 popup 之间也可以传递消息，但不建议这么做。
- 包含background.html和background.js两个文件，包括如下两种：
  - Persistent background pages：一直开启
  - Event pages：需要时开启，可通过将persistent设置为false来设置
    - 开启时机：
      - 首次安装或更新完版本时
      - 触发特定事件时
      - content script 向其发送消息时
      - 其他页面（例如popup）调用runtime.getBackgroundPage时
    - 注册到Manifest中：

        {
         "name": "My extension",
         ...
         "background": {
           "scripts": ["eventPage.js"],
           "persistent": false
          },
         ...
         }

UI Page
- popup:
  - popup.html和popup.js：popup和background page在同一个运行环境中，均在插件主程序中。也就是说popup可以通过特定的方式调background里的方法。注：出于安全考虑，javascript必须与html分开存放且写在html里的js无效。
- option:
Content Scripts
Content Scripts相当于一个对当前浏览页面（符合matches定义的模式）的补充脚本，称作内容脚本，与popup不同，内容脚本几乎与主程序运行环境相隔离、独立。与主程序的交互只能通过发送消息的方式进行。
- CanDo：
  可以访问和修改单前浏览页面的DOM，但不能访问该页面脚本定义的变量和方法，并且不会和该页面原有js的方法和变量冲突。
- CanNot：
  - 不能使用chrome独有API，除了以下几点：
    - extension(getURL,inIncognitoContext,lastError,onRequest,sendRequest)
    - i18n
    - runtime ( connect , getManifest , getURL , id , onConnect , onMessage , sendMessage )
    - storage
  - 不能使用插件里其他页面定义的变量和方法
- 向访问的页面注入脚本，访问和修改DOM的方式：
  只有为要访问的页面赋予权限才可以，需在Manifest中添加permissions节点。
  向页面插入脚本的API:
- 注入脚本:chrome.tabs.executeScript,如下:

    //将访问页面的背景变为红色
    chrome.browserAction.onClicked.addListener(function(tab) {
      chrome.tabs.executeScript({
        code: 'document.body.style.backgroundColor="red"'
      });
    });

注入CSS：chrome.tabs.insertCSS
注册到Manifest中

    {
      "name": "My extension",
      ...
      "content_scripts": [
        {
          "matches": ["http://www.google.com/*"],//只有在符合该pattern的站点才会运行
          "css": ["mystyles.css"],
          "js": ["jquery.js", "myscript.js"]
        }
      ],
      //为以下页面赋予访问并向注入脚本的权限
      "permissions": [
        "tabs", "http://www.google.com/*",
        "activeTab"
      ],
      ...
    }

消息传递：
虽然内容脚本的执行环境和托管它们的页面是彼此隔离的，但它们共享对页面DOM的访问权限，如果页面希望与内容脚本（或通过内容脚本进行扩展）进行通信，那么它必须通过共享的DOM进行。示例如下：

      //访问的页面：
      document.getElementById("theButton").addEventListener("click",
    function() {
    window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
    }, false);
    
    //content_scripts脚本；
    var port = chrome.runtime.connect();
    
    window.addEventListener("message", function(event) {
    // We only accept messages from ourselves
    if (event.source != window)
      return;
    
    if (event.data.type && (event.data.type == "FROM_PAGE")) {
      console.log("Content script received: " + event.data.text);
      port.postMessage(event.data.text);
      }
    }, false);

插件页面间通讯：

插件各个部分之间的通讯有如下两种模式：

简单的单次请求
- 内容脚本到主程序：

chrome.extension.sendMessage({hello: "Cissy"}, function(response) {
    console.log(response.farewell);
});

主程序到内容脚本

chrome.tabs.query({active:true}, function(tab) {
    chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
        console.log(response.farewell);
    });
});

接收消息
chrome.extension.sendMessage()向扩展内的其它监听者发送一条消息。此消息发送后会触发扩展内每个页面的chrome.extension.onMessage()事件。

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
        console.log(sender.tab ?
            "from a content script:" + sender.tab.url :
            "from the extension");
        if (request.greeting == "hello")
            sendResponse({farewell: "goodbye"});
});

长连接
- background 和 popup
  background和popup运行在同一个进程中，都是运行在主程序中的，所以background 和 popup 之间可以直接相互调用对方的方法，不需要消息传递。
  - popup调用background中变量或方法

var bg = chrome.extension.getBackgroundPage();//获取background页面
console.log(bg.a);//调用background的变量或方法。

注: 使用chrome.extension.getBackgroundPage()时要确保此时的backgroundpage在运行,否则会返回null,解决方案:
- 将manifest的background的persistent属性值设置为true,确保backgroundpage处于常开状态(我使用的该方法);

"background": {
        "scripts": [
            "background.js"
        ],
        "persistent": true
    }

  - 使用异步的 chrome.runtime.getBackgroundPage代替(该方法没测试)
- background调用popup中变量或方法
  background是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，而popup是在你点击了图标之后才存在，所以，在获取popup变量时，请确认popup已打开。

var pop = chrome.extension.getViews({type:'popup'});//获取popup页面
console.log(pop[0].b);//调用第一个popup的变量或方法。

background 和 content
持续长时间的保持会话需要在content script和扩展建立一个长时间存在的通道。当建立连接，两端都有一个runtime.Port 对象通过这个连接发送和接收消息。
- 内容脚本发送消息到扩展程序

var bac = chrome.extension.connect({name: "ConToBg"});//建立通道，并给通道命名
bac.postMessage({hello: "Cissy"});//利用通道发送一条消息。

- 扩展程序发送消息到内容脚本

var cab = chrome.tabs.connect(tabId, {name: "BgToCon"});//建立通道，指定tabId，并命名
    cab.postMessage({ hello: "Cissy"});//利用通道发送一条消息。

- 接收消息
接收消息为了处理正在等待的连接，需要用chrome.extension.onConnect 事件监听器，对于content script或者扩展页面，这个方法都是一样的

chrome.extension.onConnect.addListener(function(bac) {//监听是否连接，bac为Port对象
    bac.onMessage.addListener(function(msg) {//监听是否收到消息，msg为消息对象
        console.log(msg.hello);
    })
})

数据保存及隐身模式

可以使用HTML5的localStorage或保存到服务器，但是，无论何种方式，尽量保证在隐身模式的情况下不要保存任何数据，或仅将数据保存在内存中，如下：

function saveTabData(tab, data) {
  if (tab.incognito) {
    chrome.runtime.getBackgroundPage(function(bgPage) {
      bgPage[tab.url] = data;      // 匿名模式，保存为当前页面的数据，只在内存中
    });
  } else {
    localStorage[tab.url] = data;  // 保存到本地
  }
}

调试

插件各部分的调试方式各不相同，具体如下：

Content script：直接F12打开开发者工具，在Sources栏下的Content scripts即可调试
background：在chrome的扩展程序设置页面chrome://extention 下找到相应的插件，点击检查视图即可调试
popup：右击工具栏上插件的图标，选择审查弹出内容即可调试

Chrome API

除了web本身的API以外，Chrome插件还支持一些独有的API可供使用

同步方法vs异步方法
例：
同步方法：返回string的chrome.runtime.getURL()方法
异步方法：

   //获取当前页面，并修改页面url
   chrome.tabs.query({'active': true}, function(tabs) {
   chrome.tabs.update(tabs[0].id, {url: newUrl});
   });

常用API:
- chrome.extension.getURL()：获取插件文件的URL，
  例：chrome.extension.getURL("images/myimage.png");获取文件myimage.png的URL
- chrome.tabs.executeScript()：向访问页面注入脚本

最后附上一个我自己用的两个小demo，一个可以自动调整简书文章页面的宽度,一个可以修改页面样式：
简书调宽:https://github.com/rascalquan/JianShuNoteWidth

简书调宽.png

CSS修改器：https://github.com/rascalquan/ChangePageStyle

Paste_Image.png

Chrome插件开发总结

架构

总括：

Manifest

Background Page

UI Page

popup:

option:

Content Scripts

插件页面间通讯：

简单的单次请求

长连接

数据保存及隐身模式

调试

Chrome API

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Chrome

前端