如何从Chrome扩展访问AngularJS根作用域

Question

我正在开发一个 Chrome 扩展程序，用于读取用户正在浏览的网页上的数据。我在内容脚本中使用 jQuery 从 DOM 中获取数据。在除了使用 AngularJS 的网站之外的所有页面中，它都能按预期工作。该页面使用路由机制来加载连续的页面。但是当这种路由更改发生时，内容脚本并不会重新加载。 我在 background.js 页面中使用 Chrome 的 webNavigation 监听 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扩展访问此injector数据或根作用域？谢谢。

- Sriram

---

尝试这个.. angular.element(document.getElementById('container')).scope().$root - Vinay K

@VinayK 很抱歉我的问题没有表达清楚。问题是如何从 Chrome 扩展内容脚本访问作用域。当我在控制台中使用“顶层框架”运行上面发布的命令时，它可以工作。但是，当我在扩展作用域中运行它时，它返回未定义。 - Sriram

Answer 1

Chrome扩展程序的内容脚本在单独的执行环境中运行。【官方文档】

因此，chrome扩展无法从内容脚本访问angular元素的作用域。要访问它，我们需要从内容脚本将脚本注入页面的作用域中，并使用事件侦听器传递数据。

首先，在单独的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
 }
}));

将上述脚本从内容脚本注入到页面中

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);
});

现在，使用这些事件监听器，你可以在页面和内容脚本之间传递数据。

- Sriram

---

midd-container-inner是什么？ - Big Money