从Chrome扩展注入的脚本是否可以访问页面上的javascript(angularjs）

Do injected script from Chrome Extension have access to javascript (angularjs) on the page?

本文关键字：javascript 访问 angularjs 扩展 Chrome 注入 脚本 是否      更新时间：2023-09-26

我正在尝试使用Google Chrome扩展作为我正在开发的网页的补充工具。

我使用chrome.tabs.executeScript通过Google Chrome扩展在web应用程序上注入了这个script。

注入的脚本

<script>
    var angular = document.querySelector('body');
    var scope = angular.element(angular).scope();
    ...
</script>

脚本已正确注入。但是，当调用脚本时，我会得到这个错误Uncaught TypeError: angular.element is not a function。这基本上意味着脚本无法找到AngularJS依赖项（？）。

所以我的问题是，从Chrome扩展注入的脚本是否可以访问页面上的javascript（AngularJS）？

如果是，我做错了什么？如果没有，什么是好的替代解决方案？

您正试图重用在独立范围内运行的页面脚本中的代码。

由于DOM是共享的，您可以通过在内容脚本中创建脚本标记来注入页面脚本。

script.js

// define pageScript as a string or use xhr 
// to load it from a separate file, i. e. page-script.js
var pageScript = `
    var angular = document.querySelector('body');
    var scope = angular.element(angular).scope();
    //...`;
var scriptEl = document.createElement('script');
scriptEl.textContent = pageScript;
document.head.appendChild(scriptEl);

background.js

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.executeScript({ file: 'script.js' });
});
相关文章：