Chrome 扩展程序开发初探

发表于

近期想获取一个网页聊天室的最新消息，聊天室是用 js 写的，通过网页源代码看到的 js 代码也非常之混乱，应该是经过混淆处理，原本想通过研究源码用 python 来获取的方式告负。经过几番摸索，发现可以通过浏览器的 Console 输入 js 代码，可以获取到已经加载出来的界面信息，这样只要定时获取到最后一条消息即可。那该怎么去做呢？第一时间就想到了 Chrome 扩展程序，Chrome浏览器一直用着别人的扩展程序，是不是自己也可以写一个完成自己的需求，说做就做。

官方文档：https://developer.chrome.com/extensions

官网有各种示例，我们下载一个入门级的：Hello Extensions ，在此基础上进行开发。示例很简单，就三个文件

1
2
3
hello_extensions.png
hello.html
manifest.json

浏览器中输入

1
chrome://extensions

就会进入谷歌浏览器的扩展程序界面，这里会列出你已经安装的扩展程序，在界面的右上角有一个开发者模式的开关，打开，然后点击 加载已解压的扩展程序 选择刚刚下载的 Hello Extensions，现在我们就可以在地址栏的右边看到一个 Hi 的图标

现在来看看那三个文件

hello_extensions.png

这个就是图片文件，没啥说的

hello.html

这个是我们点击 Hi 图标时显示的内容，文件内容也很简单，我们之后可以根据自己的需求编写内容

manifest.json

这个主要的，是扩展程序的配置文件，来看下里面的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "Hello Extensions", // 插件的名称
  "description" : "Base Level Extension",  // 插件描述
  "version": "1.0",  // 插件的版本
  "browser_action": {// 浏览器右上角图标设置
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "manifest_version": 2,   // 清单文件的版本，这个必须写，而且必须是2
  "commands": {// 快捷键
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

至此，我们先撸撸需求，只去学习相应的知识点就可以了。现在我的需求是获取网页的信息，很简单的一个需求，通过一番研究，做到以下两点即可：

1、在 background 中过滤自己要获取的网页

2、在 content_scripts 中获取网页信息

我们以 http://www.githubrank.com/ 网址为例，信息嘛，那就获取数量排名总数量吧

首先我们新建 background. js 和 contentScript.js 文件，然后在配置文件 manifest.json 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{
  "name": "Hello Extensions", // 插件的名称
  "description" : "Base Level Extension",  // 插件描述
  "version": "1.0",  // 插件的版本
  "manifest_version": 2,   // 清单文件的版本，这个必须写，而且必须是2

    // 会一直常驻的后台 JS 或后台页面
  "background":{
    // 2种指定方式，如果指定 JS，那么会自动生成一个背景页
    // "page": "background.html"
    "scripts":["background.js"],
    "persistent":false
  },

    // 当某些特定页面打开才显示的图标
  "page_action": {
    "default_title": "Hello Extensions",
    "default_icon": "hello_extensions.png",
    "default_popup": "hello.html"
  },

  // page_action 和 browser_action 存一即可
  // "browser_action": {// 浏览器右上角图标设置
  //   "default_popup": "hello.html",
  //   "default_icon": "hello_extensions.png"
  // },

  // 权限申请
  "permissions":[
    "declarativeContent"
  ],

  // 需要直接注入页面的JS
  "content_scripts":[
    {
      // "<all_urls>" 表示匹配所有地址
      // "matches": ["<all_urls>"],
      "matches": [ "http://www.githubrank.com/*" ],
      // 多个JS按顺序注入
      "js":["contentScript.js"],
      // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
      "run_at": "document_idle"
    }
  ],

 // 快捷键
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

background

是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

配置中，background 可以通过 page指定一张网页，也可以通过 scripts 直接指定一个 JS，Chrome 会自动为这个 JS 生成一个默认的网页。根据我们的需求，这里只做一个过滤显示设置

1
2
3
4
5
6
7
8
9
10
11
12
13
chrome.runtime.onInstalled.addListener(function(){
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
        chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [
                 // 只有打开 githubrank 才显示 pageAction
                new chrome.declarativeContent.PageStateMatcher({
                    pageUrl: { urlContains: 'githubrank.com' }
                })
            ],
            actions: [new chrome.declarativeContent.ShowPageAction()]
        }]);
    });
});

content_scripts

所谓 content-scripts，其实就是 Chrome 插件中向页面注入脚本的一种形式（虽然名为 script，其实还可以包括 css 的），借助 content-scripts 我们可以实现通过配置的方式轻松向指定页面注入 JS 和 CSS（如果需要动态注入，可以参考下文），最常见的比如：广告屏蔽、页面 CSS 定制，等等。

根据我们的需求，只需要简单的 js 即可

1
alert("排名数量："+document.getElementsByClassName('avatar').length)

然后我们刷新扩展程序，刷新 www.githubrank.com 页面，即可看到

小结

以上只是一个简单演示，也算自己的一个记录，对于更复杂的需求，可以根据官方文档学习更多知识，完成自己的需求，网上也有人整理得比较好的文章：

https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

仅此记录