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

debugcn 发表于 Dev

我正在构建一个Google chrome扩展程序，该扩展程序可“抓取”特定网站的对象的DOM，并在javascript函数中对其进行处理。

目前，我正在使用chrome.tabs.query API在后台页面中执行操作。我能够使用以下方法从网址中提取数据

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

我收到以下错误：

无法读取null处未定义的属性'querySelector'

我不确定我要使用的是最有效的方法，所以我的问题是就构建chrome扩展而言，在背景HTML页面的DOM中“抓取” Angular对象的最佳方法是什么？

海原爱

下一行有两个错误：

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

this指回调，没有财产document为this对象
如果直接使用document.querySelector...，则事件仍将无法获取，因为当您在后台页面中调用此行时，它document指向后台页面文档而不是网页。

一个建议是使用消息传递来获取值，您将需要一个内容脚本并在它与背景页面之间建立通信。

背景页面：

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

内容脚本（您需要检索正确的角度对象，具体取决于您的网页，我对此无能为力）：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。