從Chrome擴展程序注入的腳本可以訪問頁面上的javascript（angularjs）嗎？

Question

我正在嘗試使用Google Chrome瀏覽器擴展程序作為我正在開發的網頁的補充工具。

我使用chrome.tabs.executeScript通過Google Chrome擴展程序將該script注入了Web應用程序。

注入腳本

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

該腳本已正確注入。 但是，出現此錯誤Uncaught TypeError: angular.element is not a function腳本時， Uncaught TypeError: angular.element is not a function 。 這基本上意味着腳本無法找到AngularJS依賴項（？）。

所以我的問題-從Chrome擴展程序注入的腳本可以訪問頁面上的javascript（AngularJS）嗎？

如果是，我在做什么錯？ 如果沒有，什么是好的替代解決方案？

Answer 1

您正在嘗試重用在隔離范圍內運行的頁面腳本中的代碼。

由於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' });
});