web-dev-qa-db-ja.com

Chrome拡張機能により、現在のページのHTMLに外部JavaScriptが追加されます

chrome拡張機能を使用して、ページの最後に外部JavaScriptを追加しています。外部JavaScriptは、サーバーにデータをポストバックしようとしますが、実行されていません。

JavaScriptは、現在のページとリファラーのURLを取得して、サーバーにポストバックすることを望んでいます。

誰かが私にここで何が間違っているのか教えてくれませんか？この方法でできない場合はどうすれば現在のページからサーバーにデータを投稿できますか？.

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

今のところ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

コンテンツスクリプトはnotをページのスコープ内で実行します（ も参照 ）。これらは、拡張機能とWebページ間のコンテキストで実行されます。

トラッカーは「挿入されたスクリプト」タイプであるため、これらはWebページのコンテキストで完全に実行されます。ただし、_gaq変数とHasync変数にはありません。その結果、追跡スクリプトは構成変数を読み取ることができません。

それを修正する方法は2つ（3つ）あります。

  1. this method を使用して（質問に投稿されているように）コードを挿入します。このメソッドを目的に使用するのはdiscouragedです。これは、スクリプトが一般的に使用されるグローバル変数を上書きするためです。この方法を使用してスクリプトを実装すると、break多くのWebサイトでの追跡-使用しないになります。
  2. コンテンツスクリプトのスコープ内でコードを完全に実行します。
    2つのオプション：
    1. 拡張機能に外部ファイルを含める
    2. 拡張機能に外部ファイルを含め、さらに自動更新機能を実装します。

方法1：完全にローカルコピー

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：最新のGAを挿入する

最新バージョンのGAが必要な場合は、コンテンツスクリプト外部URLから含めることはできませんであるため、コードを挿入する複雑な方法を使用する必要があります。

この回答の古いバージョンは、バックグラウンドページと 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();
}

最小マニフェストファイル：

{
  "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>でも十分です。
  • optional：unlimitedStorage-大きなデータをchrome.storageで保存する場合。
43
Rob W

2015年の更新

新しいUniversal Analyticsスニペットは確実に multiple trackers を処理できるため、独自の名前を付けてallを実行するとしますAnalyticsコード ページのコンテキストで 、それで問題ありません。

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

注：最初のdocument.documentElement要素の代わりに<script>を使用するようにアナリティクススニペットにわずかな変更が1つあります。これは、Googleがインラインスクリプトブロックに分析を追加することを想定しているのに対し、ここではコンテンツスクリプトから分析を追加するためです。

5
gblazex

私はこのスレッドを読みました： https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/yc-ouDqfMw 公式chromeメソッドをページに分析スクリプトを追加するためのもので、公式のドキュメントにはありません。

参照のためにこの拡張機能を参照できます： https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/analytics これはこのlibを使用します： https ：//github.com/GoogleChrome/chrome-platform-analytics

基本的に、手動でスクリプトをローカルに含めます。

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

次に、いくつかのライブラリ関数を呼び出します。

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

注：どうやら、あなたはオプトアウト機能を持っている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