如何访问Chrome扩展angularjs根范围 [英] How to access angularjs root scope from chrome extension

问题描述

我工作的一个Chrome扩展其从网页上用户读取数据浏览上。我在上下文中的脚本使用jQuery来从DOM数据。它的工作原理如预期中的所有页面中使用AngularJS一个网站的期望。该页面使用路由机制来加载连续页面。但是，当这条路线发生变更的内容脚本没有得到重新加载。
我使用Chrome webNavigation 听onHistoryStateUpdated在background.js页面。

  chrome.webNavigation.onHistoryStateUpdated.addListener（功能（详细信息）{
    的console.log（详细信息）;
    chrome.tabs.sendMessage（details.tabId，{行动：open_dialog_box}，函数（响应）{    }）;
}）;
 

但这个事件触发连下页面加载完全的数据之前。我用下面的code在开发者控制台，这使正确的请求的数据。

  angular.element（的document.getElementById（'集装箱'））。喷油器（）。获得（'$ rootScope'）
 

但是，从内容脚本调用时该喷油器（）命令不起作用。我们如何从Chrome扩展访问该喷油器的数据或根范围内？

感谢您

解决方案

浏览器扩展程序内容脚本在单独的执行环境中运行。的 [官方文档]

因此​​Chrome扩展无法访问的内容脚本角元素的范围元素。要访问此，我们需要注入的内容脚本的页面范围内的脚本，并使用事件侦听器传递数据。

首先创建一个需要访问一个单独的JS文件根范围内的脚本。

angular_inject.js

\r

\r

变量$ rootScope = angular.element（的document.getElementById（'MIDD-盛器内'。））喷油器（）得到（'$ rootScope'）;\r
VAR CURRVAL = $ rootScope.data ['身份证'];\r
document.dispatchEvent（新自定义事件（'RW759_connectExtension'，{\r
细节：{\r
ID：CURRVAL\r
}\r
}））;

\r

\r

\r

从内容脚本注入页面内上面的脚本

content_script.js

\r

\r

变种S =使用document.createElement（'脚本'）;\r
s.src = chrome.extension.getURL（'脚本/ angular_inject.js'）;\r
（document.head || document.documentElement中）.appendChild（S）;\r
s.onload =功能（）{\r
    s.parentNode.removeChild（多个）;\r
};\r
\r
//事件监听器\r
document.addEventListener（RW759_connectExtension'，函数（E）{\r
    // e.detail包含了传输的数据（可以是任何东西，轻则\r
    //从JavaScript对象为字符串）。\r
    //做一些事情，例如：\r
的console.log（e.detail）;\r
}）;

\r

\r

\r

现在使用这个事件监听器您可以传递数据页来回内容的脚本。

I am working on a chrome extension which reads data from the webpage user is browsing on. I am using jQuery in context script to get the data from the DOM. It works as expected in all pages expect in a website which uses AngularJS. The page uses route mechanism to load consecutive pages. But content script does not get reloaded when this route change happens. I am using Chrome webNavigation to listen to onHistoryStateUpdated in the background.js page.

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

    });
});

But this event fires even before the data of the next page loads completely. I used the below code in developer console, which gives the requested data properly.

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

But this injector() command does not work when called from the content script. How do we access this injector data or root scope from chrome extension?

Thank You

解决方案

Chrome extension content scripts run in a separate execution environment. [official doc]

So chrome extensions cannot access the scope element of angular elements from content script. To access this, we need to inject the script inside the scope of the page from content script and pass data using event listeners.

First create the script which needs to access the root scope in a separate JS file.

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 the above script inside the page from content script

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

Now using this event listeners you can pass data back and forth from page to content scripts.

这篇关于如何访问Chrome扩展angularjs根范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！