使用chrome插件更改页面上下文中的变量与函数

相关 API 介绍

Content scripts

Content scripts 是运行在 web 页面的文件，能够获取到页面的 DOM 元素，并与页面进行交互。可以在 manifest.json
中声明插入的 js 文件：

{
    "content_scripts": [
       {
         "matches": ["http://*.nytimes.com/*"],
         "js": ["contentScript.js"]
       }
    ],
}

Content scripts 虽然可以获取到 DOM，但是它运行在一个独立的沙盒中，所以无法获取到页面上下文的变量和函数。因此需要向页面中插入 js 文件来获取页面上下文中的变量，即使用 web_accessible_resource
。

web_accessible_resources

在 manifest.json
中使用 web_accessible_resources
可以声明文件，这些文件可以在页面的上下文所使用，并且这些文件运行在页面上下文中，与我们插入到html文件中的文件是一样的。

{
  "name": "extension name",
    "web_accessible_resources": [
    "script.js"
  ]
}

获取扩展中的文件的URL

Content scripts 里面是可以直接调用 chrome
的一部分API的，其中一个API就是获取当前扩展中所包含的文件的URL，这个URL可以直接当做普通的URL来使用。比如我们在扩展中有一个 script.js
文件，我们就可以获取到该文件的URL：

const url = chrome.runtime.getURL('script.js');
// 这个 url 可以直接使用
document.querySelector('#scriptId').src = url;

【实操】：插入并执行 js 文件

利用以上API，我们就能达到向页面中插入 js 文件的目的。现在我们利用插件向页面中插入一个全局变量 injectVariable
。

1. 编写 Content script

// contentScript.js
var s = document.createElement('script');
s.src = chrome.runtime.getURL('script.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

2. 编写 script.js

// script.js
window.injectVariable = 'haha';

3. 在 manifest.json 中声明文件

{
    "name": "extension name",
  "content_scripts": [
    {
        "matches": ["http://*.yoursite.com/*"], // 这里写需要插入的页面的 url，可以使用通配符
        "js": ["contentScript.js"],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources": [
    "script.js"
  ]
}

然后在页面中读取全局变量 injectVariable
，就能读到我们插入的值了:wink: