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

我正在构建一个Google Chrome扩展，它为对象的“特定网站”的DOM“刮”并在JavaScript函数中处理它们。如何将一个Angular对象传递给Google Chrome扩展中的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'); 
});

但现在我想从页面的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

我不知道我会有关的最有效的方法，所以我的问题是：如何在雷加后台HTML页面的DOM来“凑”角物体最优化的方式ds构建一个Chrome扩展？

来源

2016-08-11 kat

您必须使用[内容脚本]（https://developer.chrome.com/extensions/content_scripts） –

有以下行两个错误：

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

this指回调，没有物业document为this对象
事件，如果你直接使用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); 
    }); 
});

内容的脚本（您将需要获取正确的角度对象，这就要看你的网页上，我不能与帮助）：

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

来源

2016-08-12 00:33:19

-1

对于那些有类似问题的人，我发现你也可以使用

 chrome.tabs.executeScript({ 
     code: 'console.log('Hello World')' 
    });

将原始代码注入网页

我遇到铬扩展文件找不到错误时遇到此解决方案。我相信有什么代码可以实际注入页面的限制，但我不是100％确定确切的限制。

来源

2016-09-22 00:22:24 kat

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

回答

相关问题