I am adding some external JavaScript to the end of the page via my chrome extension. The external JavaScript then tries to post some data back to the server, however that is not taking place.
The JavaScript wants to get the url of the current page and the referrer and post it back to the server.
Can anyone please advice me what is wrong here and how can I if not possible this way can I post data from the current page back to the server.
manifest.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"]
}
]
}
for now 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);
})();
Content scripts do not run in the scope of the page (see also), they run in a context between your extension and the web page.
Since the trackers are of the type "Injected script", these fully run in the context of the web page. But the _gaq
and Hasync
variables don't. As a result, the track scripts cannot read the configuration variables.
There are two (three) ways to fix it.
manifest.json
(only the relevant parts are shown):
{
"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"]
}
]
}
In ga-config.js
, define the variables as follows:
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', '']);
Download https://ssl.google-analytics.com/ga.js, and save it as ga.js
.
Download http://s10.histats.com/js15_as.js, and save it as js15_as.js
.
If you want to have an up-to-date version of GA, a convoluted way of injecting the code has to be used, because Content scripts cannot be included from an external URL.
An old version of this answer relied on the background page and chrome.tabs.executeScript
for this purpose, but since Chrome 20, a better method has become available: Use the chrome.storage
API to cache the JavaScript code.
To keep the code updated, I will store a "last updated" timestamp in the storage; you can also use the chrome.alarms
API instead.
Note: Do not forget to include a local copy of the external file in your extension, in case the user does not have an internet connection, etc. Without an internet connection, Google Analytics wouldn't work anyway.
Content script, 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();
}
Minimum manifest file:
{
"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"]
}
The same method can be used for other trackers. The minimum permission requirements:
https://ssl.google-analytics.com/ga.js
, so that should be added at the permissions section. https://*/*
or <all_urls>
is also sufficient.unlimitedStorage
- If you want to store a large piece of data with chrome.storage
.