injected-script

这里的injected-script是我给它取的，指的是通过DOM操作的方式向页面注入的一种JS。为什么要把这种JS单独拿出来讨论呢？又或者说为什么需要通过这种方式注入JS呢？

这是因为content-script有一个很大的“缺陷”，也就是无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它，也就是无法在DOM中通过绑定事件的方式调用content-script中的代码（包括直接写onclick和addEventListener2种方式都不行），但是，“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求，那该怎么办呢？其实这就是本小节要讲的。

在content-script中通过DOM方式向页面注入inject-script代码示例：

  1. // 向页面注入JS
  2. function injectCustomJs(jsPath)
  3. {
  4.  jsPath = jsPath || 'js/inject.js';
  5.  var temp = document.createElement('script');
  6.  temp.setAttribute('type', 'text/javascript');
  7.  // 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
  8.  temp.src = chrome.extension.getURL(jsPath);
  9.  temp.onload = function()
  10.  {
  11.  // 放在页面不好看，执行完后移除掉
  12.  this.parentNode.removeChild(this);
  13.  };
  14.  document.head.appendChild(temp);
  15. }

你以为这样就行了？执行一下你会看到如下报错：

  1. Denying load of chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

意思就是你想要在web中直接访问插件中的资源的话必须显示声明才行，配置文件中增加如下：

  1. {
  2.  // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
  3.  "web_accessible_resources": ["js/inject.js"],
  4. }

至于inject-script如何调用content-script中的代码，后面我会在专门的一个消息通信章节详细介绍。