javascript - 如何从 chrome 扩展访问 angularjs 根范围

Question

我正在开发一个 chrome 扩展程序，它从用户正在浏览的网页中读取数据。我在上下文脚本中使用 jQuery 从 DOM 获取数据。它在使用 AngularJS 的网站中的所有页面中都按预期工作。页面使用路由机制来加载连续的页面。但是当发生此路由更改时，内容脚本不会重新加载。我正在使用 Chrome webNavigation在 background.js 页面中监听 onHistoryStateUpdated。

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
    console.log(details);
    chrome.tabs.sendMessage(details.tabId, {action: "open_dialog_box"}, function(response) {

    });
});

但是这个事件甚至在下一页的数据完全加载之前就会触发。我在开发人员控制台中使用了以下代码，它正确地提供了请求的数据。

angular.element(document.getElementById('container')).injector().get('$rootScope')

但是这个 injector() 命令在从内容脚本调用时不起作用。我们如何从 chrome 扩展访问这个注入(inject)器数据或根范围？

谢谢

Answer 1

Chrome 扩展内容脚本在单独的执行环境中运行。 [official doc]

因此 chrome 扩展无法从内容脚本访问 Angular 元素的范围元素。要访问它，我们需要从内容脚本中将脚本注入(inject)页面范围内，并使用事件监听器传递数据。

首先在单独的 JS 文件中创建需要访问根作用域的脚本。

angular_inject.js

var $rootScope = angular.element(document.getElementById('midd-container-inner')).injector().get('$rootScope');
var currval = $rootScope.data['id'];			
document.dispatchEvent(new CustomEvent('RW759_connectExtension', {
	detail: {
		id: currval
	}
}));

从内容脚本中将上面的脚本注入(inject)到页面中

content_script.js

var s = document.createElement('script');
s.src = chrome.extension.getURL('scripts/angular_inject.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
    s.parentNode.removeChild(s);
};

// Event listener
document.addEventListener('RW759_connectExtension', function(e) {
    // e.detail contains the transferred data (can be anything, ranging
    // from JavaScript objects to strings).
    // Do something, for example:
	console.log(e.detail);
});

现在使用此事件监听器，您可以在页面与内容脚本之间来回传递数据。