Chrome 扩展 - 将对象从页面传递到上下文脚本

IT技术 javascript google-chrome-extension
2021-03-15 21:43:03

我正在编写一个 chrome 扩展，我正在努力将一个对象从主页传递回上下文脚本。我似乎无法访问窗口的变量。

上下文脚本

//STORE DATA TO CHROME STORAGE ON EVENT
//create hidden input
var hiddenInput = document.createElement("input");
hiddenInput.setAttribute("type", "text");
hiddenInput.setAttribute("id", "__HIDDEN__RESULT__");
//add input to page
var currentItem = document.body.appendChild(hiddenInput);
//event to be fired on click
currentItem.onclick = function() {
    //get the global variable window.listOfCourses and stick it in storage
    chrome.storage.local.set({'dataVault' : window.listOfCourses});
};

//inject script into page
var s = document.createElement("script");
s.src = chrome.extension.getURL("gradebook.js");
s.onload = function() {this.parentNode.removeChild(this);};
(document.head||document.documentElement).appendChild(s);

注入脚本

function processData()
{
    window.listOfCourses = [];

    for (i=0; i < window.completedData.length; i++)
    {
        //get data and add to window.listOfCourses
    }
    var myElement = document.getElementById("__HIDDEN__RESULT__")
    myElement.click();
}

注入的脚本从页面中提取信息，将其粘贴到设置为全局变量的对象中，然后最终触发输入的 onclick 事件。

所有这些都有效。但是，当点击事件触发并运行 currentItem.onclick() 并尝试访问 window.listOfCourses 时，它看不到该变量。我很困惑为什么我再也看不到我的全局变量了。

任何帮助将不胜感激！

2个回答

内容脚本和页面级注入脚本的全局变量是隔离的。

内容脚本在称为孤立世界的特殊环境中执行。他们可以访问被注入页面的 DOM，但不能访问页面创建的任何 JavaScript 变量或函数。它查看每个内容脚本，就好像它正在运行的页面上没有其他 JavaScript 正在执行一样。反过来也是如此：在页面上运行的 JavaScript 无法调用任何函数或访问内容脚本定义的任何变量。

强调我的。

要将数据传递给您的内容脚本，您不必使用额外的 DOM 元素。您只需要自定义 DOM 事件。

// Content script
// Listen for the event
window.addEventListener("FromPage", function(evt) {
  /* message is in evt.detail */
}, false);

// Page context
var message = {/* whatever */};
var event = new CustomEvent("FromPage", {detail: message});
window.dispatchEvent(event);

有关更多详细信息，请参阅此答案。

谢谢 Xan，这正是我要找的！
2021-04-22 21:43:03

以上答案可能有效，但我认为这不是正确的方法......

第一的：

如果您已经发布您的扩展，让应用程序键，并把它变成你的清单“键”所描述的在这里：

  • 安装Chrome 扩展源查看器
  • CRX -> 查看扩展源 -> 输入已发布的应用程序 URL -> 输入
  • 打开开发者工具 (F12) -> 进入控制台

  • 将控制台中的 "key" atring 复制到本地 manifest.json 中：

    "key": "MIIBIjANBgkqhkiG9w...RwIDAQAB",

这将确保您的本地和发布的扩展具有相同的extensionId

第二：

  • 加载您的本地扩展
  • 找出你的extensionID通过将chrome://extensions根据您的扩展标题和寻找ID

第三：

在你的后台脚本（即 background.js）中，监听这样的消息：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.name === 'msg1') {
      alert(message.key1);
   }
});

在您的内容脚本（即 contentScript.js）中发送这样的消息：

chrome.runtime.sendMessage(extensionId, { name: 'msg1', key1: 'value1'}, undefined, (response) => {});

（将extensionId替换为您在第二步中获得的那个）

其它你可能感兴趣的问题
上一篇将props从子级传递给父级react导航 下一篇在 Firefox/Chrome 页面中打开 IE 浏览器