Chrome 扩展 - 将对象从页面传递到上下文脚本 [英] Chrome Extension - Passing object from page to context script

问题描述

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

I'm writing a chrome extension and I'm struggling to pass an object back from the main page to the context script. I can't seem to access the window's variables.

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

The injected script pulls information from a page, sticks it in an object set as global variable, then finally it fires the onclick event for the input.

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

All of this works. However, when the click event fires and runs currentItem.onclick() and tries to access window.listOfCourses, it doesn't see the variable. I'm confused why I'm not able to see my global variables anymore.

任何帮助将不胜感激！

推荐答案

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

The global variables of a content script and a page-level injected script are isolated.

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

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

强调我的.

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

To pass the data to your content script, you don't have to employ extra DOM elements. You just need custom DOM events.

// 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);

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

See this answer for far more details.

这篇关于Chrome 扩展 - 将对象从页面传递到上下文脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！