谷歌浏览器扩展开发笔记

2019独角兽企业重金招聘Python工程师标准>>>

1，参考https://www.cnblogs.com/ligerleng/p/gmail_assist_1.html

2，知识点：
page_action": 与之平级的还有另一个字段"browser_action"，你的manifest中最多出现二者之一。直观地来说，这俩属性分别指明你的扩展在特定网页中才能用，还是打开浏览器后一直能用。更直观的就是，你的扩展的图标出现的位置不同，如下图。

"background": 你的扩展如果需要什么在后台持续运行的部分，就可以通过这个字段来指出。不仅是js，你还可以指定一个自己编写的html，像这样：

"background": {
    "page": "background.html",
    "scripts": ["background.js"],
    "persistent": false
}

　　如果仅仅指定js，chrome会自己生成一个html来在后台跑你指定的脚本；当然如果指定了你自己写的html，它也不会显示出来。
"persistent"值默认为true。为true时，你在background字段中指出的js脚本（注意格式是数组，因而可以有多个脚本）将持续运行在后台，而若persistent为false，则这些脚本将只在事件活动时运行，事件不活动时就会释放其占有的内存等资源。

那么在Chrome扩展中运行的脚本有哪些呢？我的理解是大致有这么四类：background、popup页面内的js、content script、injected js。

injected:

这种脚本，和原网页自带的脚本，就完全是一路货了。

var s = document.createElement('script');
s.src = chrome.extension.getURL('tableInited.js');
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head || document.documentElement).appendChild(s);

要注入的inject.js需要在manifest中的web_accessible_resources字段里进行声明。

"web_accessible_resources" : [
        "oauth2/oauth2.html",
        "js/tableInited.js",
        "css/style.css",
        "js/table_sort_script.js",
        "images/sort.gif",
  ]

只有网页通用的API是可用的，而chrome为扩展提供的API（chrome.*），这种完全注入到用户浏览的页面中的脚本都不能访问。

• 何时使用

　　我的建议是，仅当你需要获取被浏览页面中原有js中的变量时，才把你的脚本inject到用户浏览的页面中，然后通过接下来例子里这种方式，把它传到content script中。当然了，有一些单纯地操纵DOM元素而不需要它们再返回什么数据的脚本，也可以直接inject到页面里

2.content script

而是运行在一个单独的被隔离的环境中。它的生存周期也就是跟浏览的网页一样，最迟到网页加载完全完成时，content script就开始跑了，直到用户当前浏览的网页被关闭。每次刷新时将重新载入。

• 网页通用的API，跨域xhr请求，以及chrome为扩展程序提供的API中的一部分
• 何时使用

• 需要操纵页面DOM时，需要与具体页面匹配时，需要接受injected js传出来的数据时，以及每次刷新网页都需要重新载入的脚本，就可以作为content script来写。

• 例子

• 向gmail服务器发xhr请求数据、操纵gmail页面的DOM，把返回的数据显示出来。

3.popup

• 可用API范围

这类脚本和下一类（background），我都称为“完全属于扩展程序的脚本”。它们不仅可以访问普通网页API、可以发起跨域xhr请求，而且可以访问chrome为扩展程序专门提供的API（即chrome.*）中的全部。

 

4.跑在后台（background）页面中的脚本

　所谓的后台脚本，在chrome扩展中又分为两类，分别运行于后台页面（background page）和事件页面（event page）中。两者区别在于，前者（后台页面）持续运行，生存周期和浏览器相同，即从打开浏览器到关闭浏览器期间，后台脚本一直在运行，一直占据着内存等系统资源；而后者（事件页面）只在需要活动时活动，在完全不活动的状态持续几秒后，chrome将会终止其运行，从而释放其占据的系统资源，而在再次有事件需要后台脚本来处理时，重新载入它。这两类咋区分呢？通过你在manifest中的声明：

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

　　正如上一节说过的，这里persistent的值默认是true，此时这个js就是运行在后台页面的（持续的）；若这个值为false，那就是事件页面（非持续的）了。

• 何时使用

　　需要持续运行在后台的，肯定就选这种了，而且要把persistent置为true。需要在后台处理些事件啊之类的，包括要用到content script无法访问的扩展程序专用API们时，也应该用这种，不过只要你不是需要它必须持续运行的，就把它设置成事件页面，从而提高性能。

 

 

转载于:https://my.oschina.net/u/2367514/blog/1926516