点击弹窗按钮运行代码时，浏览器扩展无法访问Highcharts对象

你遇到的Uncaught ReferenceError: Highcharts is not defined是因为Chrome扩展的内容脚本与页面全局环境完全隔离：executeScript默认注入的脚本运行在隔离的内容脚本环境中，无法直接访问页面加载的全局对象（比如Highcharts），而Tampermonkey脚本默认运行在页面主世界，所以能直接访问。

以下是两种可行的解决方法：

方案1：文件注入+指定主世界运行 #

1. 创建独立脚本文件content-script.js，写入修改颜色的逻辑：

console.log("Running");
const newColors = [
  "#FF6B6B","#FFFF00","#0082C8","#F58230","#FF0000",
  "#46F0F0","#F032E6","#D2F53C","#FABEBE","#3CB44B",
  "#008080","#E6BEFF","#AA6E28","#FFFAC8","#800000",
  "#AAFFC3","#808000","#FFD7B4","#000080","#AAAAAA",
  "#FFFFFF","#000000"
];

const chart = Highcharts.charts.slice(-1)[0];
chart.series.forEach((series, i) => {
  series.update({
    color: newColors[i % newColors.length],
  });
});

2. 修改popup.js，使用files参数注入脚本并指定world: 'MAIN'：

document.getElementById('runCodeButton').onclick = () => {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.scripting.executeScript({
      target: {tabId: tabs[0].id},
      files: ['content-script.js'],
      world: 'MAIN'
    });
  });
};

3. 确保content-script.js与popup文件处于同一目录，现有manifest配置无需额外修改。

方案2：动态注入页面脚本（无需额外文件） #

如果不想创建独立文件，可以在注入的函数中动态生成script标签，将代码注入到页面主世界：

document.getElementById('runCodeButton').onclick = () => {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.scripting.executeScript({
      target: {tabId: tabs[0].id},
      func: () => {
        const script = document.createElement('script');
        script.textContent = `
          console.log("Running");
          const newColors = [
            "#FF6B6B","#FFFF00","#0082C8","#F58230","#FF0000",
            "#46F0F0","#F032E6","#D2F53C","#FABEBE","#3CB44B",
            "#008080","#E6BEFF","#AA6E28","#FFFAC8","#800000",
            "#AAFFC3","#808000","#FFD7B4","#000080","#AAAAAA",
            "#FFFFFF","#000000"
          ];
          const chart = Highcharts.charts.slice(-1)[0];
          chart.series.forEach((series, i) => {
            series.update({
              color: newColors[i % newColors.length],
            });
          });
        `;
        document.head.appendChild(script);
        script.remove();
      }
    });
  });
};

核心原理 #

• Chrome扩展的内容脚本环境和页面的主世界环境是隔离的，内容脚本无法直接访问页面全局变量。
• 通过world: 'MAIN'（方案1）或动态创建script标签（方案2），可让代码运行在页面主世界，从而直接访问页面加载的Highcharts对象。

内容的提问来源于stack exchange，提问作者Ivan