我通过 chrome 扩展将一些外部 JavaScript 添加到页面末尾。然后,外部 JavaScript 尝试将一些数据发送回服务器,但这并没有发生。
JavaScript 想要获取当前页面的 url 和引荐来源网址并将其发布回服务器。
任何人都可以告诉我这里出了什么问题吗?如果不可能,我该如何将当前页面的数据发布回服务器。
list .json
{
"name": "Website Safety",
"version": "1.0",
"manifest_version": 2,
"description": "The Website Safety Extension.",
"browser_action": {
"name": "View the website information for ",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"background": {
// "scripts": ["refresh.js"]
"page": "background.html"
},
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
//"background_page": "background.html"
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}
]
}
现在是 contentScript.js
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31046309-1']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
//ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,1342541,4,0,0,0,00000000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('http://s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();
最佳答案
内容脚本不在页面范围内运行 ( see also ),它们在您的扩展程序和网页之间的上下文中运行。
由于跟踪器属于“注入(inject)脚本”类型,因此它们完全在网页上下文中运行。但是_gaq
和Hasync
变量则不然。因此,跟踪脚本无法读取配置变量。
有两(三种)方法可以修复它。
- 使用this method注入(inject)您的代码(如问题中发布的) 。 不鼓励使用此方法,因为您的脚本会覆盖常用的全局变量。使用此方法实现您的脚本将破坏许多网站上的跟踪 - 不要使用它。
- 在内容脚本的范围内完全运行代码:
两种选择:- 在扩展程序中包含外部文件
- 在扩展程序中包含外部文件,并实现自动更新功能。
方法一:完全本地复制
<强> manifest.json
(仅显示相关部分):
{
"name": "Website Safety",
"version": "1.0",
"manifest_version": 2,
"description": "The Website Safety Extension.",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["ga-config.js", "ga.js", "js15_as.js"]
}
]
}
在 ga-config.js
,定义变量如下:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31046309-1']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,1342541,4,0,0,0,00000000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
下载https://ssl.google-analytics.com/ga.js ,并将其另存为 ga.js
。
下载http://s10.histats.com/js15_as.js ,并将其另存为 js15_as.js
。
方法2:注入(inject)最新的GA
如果您想拥有最新版本的 GA,则必须使用复杂的代码注入(inject)方式,因为内容脚本无法从外部 URL 包含。 p>
这个答案的旧版本依赖于背景页面和 chrome.tabs.executeScript
为此,但自 Chrome 20 以来,出现了更好的方法:使用 chrome.storage
用于缓存 JavaScript 代码的 API。
为了保持代码更新,我将在存储中存储“上次更新”时间戳;您还可以使用 chrome.alarms
API 代替。
注意:不要忘记在您的扩展程序中包含外部文件的本地副本,以防用户没有互联网连接等。 如果没有互联网连接,Google无论如何,分析都不起作用。
内容脚本, activate-ga.js
。
var UPDATE_INTERVAL = 2 * 60 * 60 * 1000; // Update after 2 hour
// Retrieve GA from storage
chrome.storage.local.get({
lastUpdated: 0,
code: ''
}, function(items) {
if (Date.now() - items.lastUpdated > UPDATE_INTERVAL) {
// Get updated file, and if found, save it.
get('https://ssl.google-analytics.com/ga.js', function(code) {
if (!code) return;
chrome.storage.local.set({lastUpdated: Date.now(), code: code});
});
}
if (items.code) // Cached GA is available, use it
execute(items.code);
else // No cached version yet. Load from extension
get(chrome.extension.getURL('ga.js'), execute);
});
// Typically run within a few milliseconds
function execute(code) {
try { window.eval(code); } catch (e) { console.error(e); }
// Run the rest of your code.
// If your extension depends on GA, initialize it from here.
// ...
}
function get(url, callback) {
var x = new XMLHttpRequest();
x.onload = x.onerror = function() { callback(x.responseText); };
x.open('GET', url);
x.send();
}
最小 list 文件:
{
"name": "Website Safety",
"version": "1.0",
"manifest_version": 2,
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["activate-ga.js"]
}
],
"web_accessible_resources": ["ga.js"]
}
同样的方法可以用于其他跟踪器。最低权限要求:
-
https://ssl.google-analytics.com/ga.js
,因此应将其添加到权限部分。https://*/*
或<all_urls>
也足够了。 - 可选:
unlimitedStorage
- 如果你想用chrome.storage
存储大量数据.
关于javascript - Chrome 扩展程序将外部 javascript 添加到当前页面的 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10285886/