Chrome扩展报错Uncaught ReferenceError: angular is not defined求助

嘿，我来帮你搞定这个问题！你遇到的Uncaught ReferenceError: angular is not defined，本质是Chrome内容脚本的沙箱隔离机制在搞鬼——内容脚本运行在一个独立的全局上下文中，和页面本身的JavaScript环境是完全分开的，所以你直接拿不到页面里加载的angular对象。

问题根源 #

Chrome为了安全性，给内容脚本做了环境隔离：内容脚本有自己的window对象，和页面的window不是同一个，页面里的全局变量（比如angular）自然也访问不到。你原来的代码直接依赖页面的angular，在内容脚本的环境里当然会报错。

解决方案：把核心脚本注入到页面主环境 #

我们需要把依赖angular的代码放到页面本身的执行环境里，而不是让它在内容脚本的沙箱里跑。有两种简单的实现方式：

方式1：直接在content脚本中动态注入代码字符串

修改你的main.js，把原来的核心逻辑包装成动态创建的<script>元素，插入到页面的DOM中。这样代码就会在页面的主环境里执行，能直接访问到angular了：

console.log("Chrome Extension Hack loaded.");
alert("Hack loaded! Coded by BayMax YT");
alert("Please subscribe! Gaming gear giveaways every 50 subscribers!");

// 动态注入核心脚本到页面主环境
function injectHackScript() {
  const script = document.createElement('script');
  script.textContent = `
    (function(angular) {
     var e = angular.element;
     function c() {
      e('#detector').scope().dc.click();
     }
     function u() {
      var rcScope = e('#researchContent').scope().rc;
      rcScope.research.forEach(function(r) {
       if (rcScope.isAvailable(r)) {
        rcScope.doResearch(r);
       }
      });
      var hrScope = e('#hrContent').scope().hrc;
      hrScope.workers.forEach(function(w) {
       if (hrScope.isAvailable(w)) {
        hrScope.hire(w);
       }
      });
      var ucScope = e('#upgradesContent').scope().uc;
      ucScope.upgrades.forEach(function(u) {
       if (ucScope.isAvailable(u)) {
        ucScope.upgrade(u);
       }
      });
     }
     setInterval(c, 10);
     setInterval(u, 100);
    })(angular);
  `;
  document.head.appendChild(script);
}

injectHackScript();

方式2：拆分核心代码到单独文件（更易维护）

如果你的核心逻辑比较复杂，把它放到单独的文件里（比如js/hack-core.js），然后通过chrome.runtime.getURL加载并注入：

1. 把原来的核心自执行函数放到js/hack-core.js里：

(function(angular) {
 var e = angular.element;
 function c() {
  e('#detector').scope().dc.click();
 }
 function u() {
  var rcScope = e('#researchContent').scope().rc;
  rcScope.research.forEach(function(r) {
   if (rcScope.isAvailable(r)) {
    rcScope.doResearch(r);
   }
  });
  var hrScope = e('#hrContent').scope().hrc;
  hrScope.workers.forEach(function(w) {
   if (hrScope.isAvailable(w)) {
    hrScope.hire(w);
   }
  });
  var ucScope = e('#upgradesContent').scope().uc;
  ucScope.upgrades.forEach(function(u) {
   if (ucScope.isAvailable(u)) {
    ucScope.upgrade(u);
   }
  });
 }
 setInterval(c, 10);
 setInterval(u, 100);
})(angular);

2. 在manifest.json中添加web_accessible_resources，允许页面访问这个文件：

{ 
 "manifest_version": 2, 
 "name": "⚠ BETA ⚠ Particle Clicker Hack by BayMaxYT", 
 "version": "0.2", 
 "description": "desc123 123 hello", 
 "icons": { 
 "16": "/assets/icons/icon16.png", 
 "48": "/assets/icons/icon48.png", 
 "128": "/assets/icons/icon128.png" 
 }, 
 "author": "BayMax YT", 
 "permissions": [ "activeTab", "background" ], 
 "content_scripts": [ { 
 "matches": [ "http://particle-clicker.web.cern.ch/particle-clicker/" ], 
 "js": ["js/main.js"] 
 } ],
 "web_accessible_resources": [
  "js/hack-core.js"
 ],
 "browser_action": { 
 "default_popup": "html/popup.html", 
 "default_title": "A popup here soon" 
 } 
}

3. 修改main.js，负责注入这个核心文件：

console.log("Chrome Extension Hack loaded.");
alert("Hack loaded! Coded by BayMax YT");
alert("Please subscribe! Gaming gear giveaways every 50 subscribers!");

function injectHackScript() {
  const script = document.createElement('script');
  script.src = chrome.runtime.getURL('js/hack-core.js');
  document.head.appendChild(script);
}

injectHackScript();

为什么这样能解决问题？ #

动态创建的<script>元素会被页面的JavaScript引擎执行，运行在页面的主全局环境中，这里能直接访问到页面加载的所有全局变量（包括angular），完美绕过内容脚本的隔离限制。

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