内容脚本 https://developer.chrome.com/extensions/content_scripts在隔离环境中运行。要访问任何全局属性(页面的window
),你必须注入一个新的<script>
元素,或使用事件侦听器来传递数据。
See 这个答案 https://stackoverflow.com/a/9517879/938089?building-a-chrome-extension-with-youtube-events例如在注入<script>
页面上下文中的元素。
Example
内容脚本.js ("run_at": "document_end"
在清单中):
var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
s.remove();
};
// Event listener
document.addEventListener('RW759_connectExtension', function(e) {
// e.detail contains the transferred data (can be anything, ranging
// from JavaScript objects to strings).
// Do something, for example:
alert(e.detail);
});
script.js
- 位于扩展目录中,这将被注入到页面本身中:
setTimeout(function() {
/* Example: Send data from the page to your Chrome extension */
document.dispatchEvent(new CustomEvent('RW759_connectExtension', {
detail: GLOBALS // Some variable from Gmail.
}));
}, 0);
由于此文件是通过 chrome-extension: URL 从 DOM 加载的,因此必须将“script.js”添加到清单文件的 web_accessible_resources 部分。否则Chrome将拒绝加载脚本文件。
您应该在网页中运行尽可能少的逻辑,并在内容脚本中处理大部分逻辑。这有多种原因。首先也是最重要的,注入到页面中的任何脚本都在与网页相同的上下文中运行,因此网页可以(有意或无意)修改 JavaScript/DOM 方法,从而使您的扩展停止工作。其次,内容脚本可以访问额外的功能,例如 chrome.* API 的有限子集和跨源网络请求(前提是扩展已声明这些功能的权限)。