web-dev-qa-db-fra.com

Chrome extension ajoutant du javascript externe au html de la page actuelle

J'ajoute du JavaScript externe à la fin de la page via mon chrome. Le JavaScript externe essaie ensuite de publier des données sur le serveur, mais cela n'a pas lieu.

Le JavaScript veut obtenir l'url de la page en cours et le référent et le poster sur le serveur.

Quelqu'un peut-il me conseiller ce qui ne va pas ici et comment puis-je, si ce n'est pas possible, renvoyer les données de la page actuelle sur le serveur.

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"]
    }
  ]
}

pour l'instant 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);
})();
javascriptdomgoogle-chrome-extensiongoogle-analyticscontent-script
25
Vish

Les scripts de contenu ne s'exécutent pas dans le cadre de la page ( voir aussi ), ils s'exécutent dans un contexte entre votre extension et la page Web.

Étant donné que les trackers sont du type "Script injecté", ils s'exécutent entièrement dans le contexte de la page Web. Mais le _gaq et Hasync les variables non. Par conséquent, les scripts de suivi ne peuvent pas lire les variables de configuration.

Il existe deux (trois) façons de le corriger.

  1. Injectez votre code (tel que publié dans la question) en utilisant cette méthode . L'utilisation de cette méthode dans votre but est découragée , car votre script écrase une variable globale couramment utilisée. La mise en œuvre de votre script à l'aide de cette méthode interrompra le suivi sur de nombreux sites Web - ne l'utilisez pas .
  2. Exécutez entièrement le code dans le cadre d'un script de contenu:
    Deux options:
    1. Inclure les fichiers externes dans l'extension
    2. Incluez les fichiers externes dans l'extension, plus implémentez une fonction de mise à jour automatique.

Méthode 1: copie entièrement locale

manifest.json (seules les parties pertinentes sont affichées):

{
  "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"]
    }
  ]
}

Dans ga-config.js, définissez les variables comme suit:

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', '']);

Téléchargez https://ssl.google-analytics.com/ga.js et enregistrez-le sous ga.js.
Téléchargez http://s10.histats.com/js15_as.js , et enregistrez-le sous js15_as.js.

Méthode 2: injection d'un GA à jour

Si vous voulez avoir une version à jour de GA, une manière compliquée d'injecter le code doit être utilisée, car les scripts de contenu ne peuvent pas être inclus à partir d'une URL externe .

Une ancienne version de cette réponse reposait sur la page d'arrière-plan et chrome.tabs.executeScript à cet effet, mais depuis Chrome 20, une meilleure méthode est devenue disponible: utilisez le chrome.storage API pour mettre en cache le code JavaScript. Pour garder le code à jour, je stocke un horodatage "dernière mise à jour" dans le stockage; vous pouvez également utiliser le chrome.alarms API à la place.

Remarque: N'oubliez pas d'inclure une copie locale du fichier externe dans votre extension, au cas où l'utilisateur ne dispose pas d'une connexion Internet, etc.  Sans connexion Internet, Google Analytics ne fonctionnerait pas de toute façon.

Script de contenu, 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();
}

Fichier manifeste minimum:

{
  "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"]
}

La même méthode peut être utilisée pour d'autres trackers. Les exigences d'autorisation minimales:

  • https://ssl.google-analytics.com/ga.js, donc cela devrait être ajouté dans la section des autorisations. https://*/* ou <all_urls> est également suffisant.
  • facultatif: unlimitedStorage - Si vous souhaitez stocker une grande quantité de données avec chrome.storage.
43
Rob W

Mise à jour 2015

Le nouvel extrait Universal Analytics peut certainement gérer plusieurs trackers , donc en supposant que vous donnez un nom unique au vôtre et que vous exécutez tout Code Analytics dans le contexte de la page , vous devriez être prêt à partir.

// add Universal Analytics to the page (could be made conditional)
runFunctionInPageContext(function () {
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).Push(arguments)},i[r].l=1*new Date();a=s.createElement(o);
  a.async=1;a.src=g;document.documentElement.appendChild(a)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
});

// all Google Analytics calls should use our tracker name  
// and be run inside the page's context
runFunctionInPageContext(function () {
  ga('create', 'UA-12345-6', 'auto', {'name': 'myTracker'});
  ga('myTracker.send', 'pageview'); // note the prefix
});

// simple helper function
function runFunctionInPageContext(fn) {
  var script = document.createElement('script');
  script.textContent = '(' + fn.toString() + '());';
  document.documentElement.appendChild(script);
  document.documentElement.removeChild(script);
}

Remarque, il y a une légère modification dans l'extrait d'analyse pour utiliser document.documentElement au lieu du premier <script> élément. C'est parce que Google suppose que vous ajoutez des analyses dans un bloc de script en ligne, alors qu'ici vous l'ajoutez à partir d'un script de contenu.

5
gblazex

J'ai lu ce fil: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/yc-ouDqfMw et j'ai trouvé qu'il y avait un officiel chrome méthode pour ajouter le script d'analyse à la page, et ce n'est pas dans les documents officiels.

vous pouvez vous référer à cette extension pour référence: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/analytics et il utilise cette lib: https : //github.com/GoogleChrome/chrome-platform-analytics

fondamentalement, vous incluez manuellement le script localement:

  <script src="your_path/google-analytics-bundle.js"></script>
  <script src="main.js"></script>

alors vous appelez quelques fonctions de bibliothèque:

var service, tracker, out;

function initAnalyticsConfig(config) {
  document.getElementById('settings-loading').hidden = true;
  document.getElementById('settings-loaded').hidden = false;

  var checkbox = document.getElementById('analytics');
  checkbox.checked = config.isTrackingPermitted();
  checkbox.onchange = function() {
    config.setTrackingPermitted(checkbox.checked);
  };
}

note: apparemment, vous avez pour avoir une fonction de désabonnement https://github.com/GoogleChrome/chrome-platform-analytics/ wiki # add-privacy-support-aka-opt-out

function startApp() {
  // Initialize the Analytics service object with the name of your app.
  service = analytics.getService('ice_cream_app');
  service.getConfig().addCallback(initAnalyticsConfig);

  // Get a Tracker using your Google Analytics app Tracking ID.
  tracker = service.getTracker('UA-XXXXX-X');

  // Record an "appView" each time the user launches your app or goes to a new
  // screen within the app.
  tracker.sendAppView('MainView');
}

window.onload = startApp;
4
awongh