Javascript 未捕获类型错误：无法读取属性'；颜色'；未定义的

我正在尝试创建一个chrome扩展，它允许用户在单击扩展按钮时向图形计算器Desmos添加新颜色

两个基本文件：

chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.executeScript(tab.ib, {
    file: "add_color.js"
  });
});

及

---

但是当我尝试运行它时，我得到了未捕获的TypeError:cannotreadproperty'colors'of undefined。如果我使用DevTools控制台运行它，它运行得非常好。有人能解释一下原因吗？

您不能从内容脚本访问网页的已评估Javascript变量。扩展脚本、内容脚本和页面脚本在不同的上下文中运行。您的内容脚本可以访问页面的DOM，而不是执行上下文。因此，您需要内容脚本通过添加脚本标记直接将代码注入页面的DOM

总结

• 扩展脚本可以访问chrome选项卡
• 内容脚本可以访问页面DOM
• 页面脚本在与其他脚本不同的上下文中执行
• 内容脚本必须通过添加脚本标记来注入代码
• 注入的代码可以访问页面的已计算javascript变量
• 注入的代码可以使用

  window.postMessage

• 然后内容脚本可以通过

  chrome

  API与扩展脚本通信

---

这不好玩…

插件中的窗口与页面上的窗口不同。看看：

(function() {

  if (window.location.href === "https://www.desmos.com/calculator") {

    var name = prompt("What would you like the name of the new color to be?");
    var hex = prompt("What should the hex code of the new color be?");

    window.Calc.colors[name] = hex;

  };

})();