javascript - 如何将 Angular 对象传递给 Google Chrome 扩展程序中的 Javascript 函数？

Question

我正在构建一个 Google Chrome 扩展，它可以“抓取”特定网站的 DOM 中的对象，并在 JavaScript 函数中处理它们。

目前我正在使用 chrome.tabs.query API 在后台页面执行操作。我能够使用

从 url 中提取数据

    chrome.tabs.query({ 'active': true, 'lastFocusedWindow': true }, function (tabs) {
    var url = tabs[0].url;
    console.log(url);
    var s = url.split('?')[1];
    var installation = s.split('&')[0];
    full_url = 'http://domain.com/' + url;
    window.open(full_url, '_blank');
});

但现在我尝试将 Angular 对象从页面的 DOM 传递到类似的函数:

    chrome.tabs.query({ "active": true, "lastFocusedWindow": true }, function (tabs) {
        var dom_el = this.document.querySelector('[ng-controller="chartNewController"]');
        var ng_el = this.angular.element(dom_el);
        var ng_el_scope = this.ng_el.scope();
        var address = this.ng_el_scope.fullAddress;
    console.log(address);
});

我收到以下错误:

Cannot read property 'querySelector' of undefined at null.callback

我不确定我要采用的是最有效的方法，所以我的问题是在构建 Chrome 扩展时，在后台 HTML 页面的 DOM 中“抓取”Angular 对象的最佳方法是什么？

Answer 1

以下行有两个错误:

var dom_el = this.document.querySelector('[ng-controller="chartNewController"]');

1. this表示回调，this对象没有属性document
2. 如果直接使用document.querySelector...事件，您仍然无法获取元素，因为当您在后台页面调用此行时，document指向后台页面文档而不是网页。

一个建议是使用 Message Passing要获取该值，您需要 content script并与后台页面建立通信。

背景页:

chrome.tabs.query({ "active": true, "lastFocusedWindow": true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {action: 'get'}, function(response) {
        console.log(response.address);
    });
});

内容脚本(您需要检索正确的 Angular 对象，这取决于您的网页，我无法提供帮助):

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    if(request.action === 'get') {
        var dom_el = document.querySelector('[ng-controller="chartNewController"]');
        // Ensure retrieving the correct angular object (The previous this object), that depends on your web page environment.
        var ng_el = angular.element(dom_el);
        var ng_el_scope = ng_el.scope();
        var address = ng_el_scope.fullAddress;
        sendResponse({ address: address });
    }
});