Question

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

ContextScript

//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时，它不会看到该变量。我很困惑，为什么我再也看不到我的全局变量了。

非常感谢任何帮助！

Answer 1

内容脚本的全局变量和页面级注入脚本are isolated。

内容脚本在称为孤立世界的特殊环境中执行。他们可以访问注入页面的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);

有关详细信息，请参阅this answer。

Answer 2

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

<强>首先

如果您已发布扩展程序，请获取应用程序密钥并将其放入清单“密钥”中，如here所述：

安装Chrome Extension Source Viewer
CRX - ＆gt;查看扩展程序源 - ＆gt;输入已发布的应用程序URL - ＆gt;输入
开放式开发者工具（F12） - ＆gt;转到控制台
将“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 替换为您在第二步中获得的

）

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

2 个答案: