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

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事件.

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

任何帮助将不胜感激!

Answer 1

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

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

有关详细信息,请参阅此答案.