首页 > web前端 > js教程 > 如何从 Chrome 扩展程序中的内容脚本访问全局变量?

如何从 Chrome 扩展程序中的内容脚本访问全局变量?

Patricia Arquette
发布: 2024-10-26 05:45:02
原创
615 人浏览过

How to Access Global Variables from Content Scripts in Chrome Extensions?

从 Chrome 扩展程序中的内容脚本访问全局变量

尽管尝试通过 jQuery.load 从当前 Gmail 邮件中检索 GLOBALS 变量( )在内容脚本中,由于隔离,错误仍然存​​在。

解决方案:脚本注入和事件侦听器

要访问页面窗口的全局属性,请考虑使用:

  1. 脚本注入:将新的脚本元素注入到页面上下文中:
var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
(document.head||document.documentElement).appendChild(s);
登录后复制

脚本加载后,将其删除以保持整洁:

s.onload = function() {
    s.remove();
};
登录后复制
  1. 事件监听器: 使用事件监听器传输数据:
document.addEventListener('RW759_connectExtension', function(e) {
    // e.detail contains transferred data, e.g., GLOBALS
});
登录后复制

示例代码:

contentscript.js(在 document_end 处运行):

// Inject script
var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
(document.head||document.documentElement).appendChild(s);

// Event listener
document.addEventListener('RW759_connectExtension', function(e) {
    alert(e.detail); // Access GLOBALS
});
登录后复制

script.js(清单中的“run_at”:“document_end”):

setTimeout(function() {
    document.dispatchEvent(new CustomEvent('RW759_connectExtension', {
        detail: GLOBALS // Send data
    }));
}, 0);
登录后复制

记住将“script.js”添加到清单文件中的 web_accessible_resources 部分。

最佳实践:

最小化注入中的逻辑脚本并处理内容脚本中的大部分处理,以确保扩展可靠性和对 chrome.* API 等附加功能的访问。

以上是如何从 Chrome 扩展程序中的内容脚本访问全局变量?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板