javascript - क्रोम एक्सटेंशन बाहरी जावास्क्रिप्ट को वर्तमान पृष्ठ के एचटीएमएल में जोड़ रहा है




dom google-chrome-extension (2)

मैंने इस धागे के माध्यम से पढ़ा है: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/yc-ouDqfMw0 और पाया कि एनालिटिक्स स्क्रिप्ट को जोड़ने के लिए एक आधिकारिक क्रोम विधि है पेज, और यह आधिकारिक दस्तावेज़ों में नहीं है।

आप संदर्भ के लिए इस एक्सटेंशन का संदर्भ ले सकते हैं: https://github.com/GoogleChrome/chrome-app-samples/tree/master/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;

मैं अपने क्रोम एक्सटेंशन के माध्यम से पेज के अंत में कुछ बाहरी जावास्क्रिप्ट जोड़ रहा हूं। बाहरी जावास्क्रिप्ट तब सर्वर पर कुछ डेटा वापस पोस्ट करने का प्रयास करता है, हालांकि यह नहीं हो रहा है।

जावास्क्रिप्ट मौजूदा पेज और रेफरर का यूआरएल प्राप्त करना चाहता है और इसे सर्वर पर वापस पोस्ट करना चाहता है।

क्या कोई मुझे सलाह दे सकता है कि यहां क्या गलत है और यदि मैं संभव नहीं हूं तो मैं वर्तमान पृष्ठ से डेटा को सर्वर पर वापस कैसे पोस्ट कर सकता हूं।

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

सामग्री स्क्रिप्ट पृष्ठ के दायरे में नहीं चलती हैं ( यह भी देखें ), वे आपके एक्सटेंशन और वेब पेज के बीच एक संदर्भ में चलती हैं।

चूंकि ट्रैकर्स "इंजेक्शन स्क्रिप्ट" प्रकार के हैं, ये वेब पेज के संदर्भ में पूरी तरह से चलते हैं। लेकिन _gaq और Hasync चर नहीं है। नतीजतन, ट्रैक स्क्रिप्ट कॉन्फ़िगरेशन चर नहीं पढ़ सकते हैं।

इसे ठीक करने के दो (तीन) तरीके हैं।

  1. इस विधि का उपयोग करके अपना कोड इंजेक्ट करें (जैसा कि प्रश्न में पोस्ट किया गया है)। आपके उद्देश्य के लिए इस विधि का उपयोग निराश हो गया है , क्योंकि आपकी स्क्रिप्ट एक सामान्य रूप से उपयोग किए जाने वाले वैश्विक चर को ओवरराइट करती है। इस विधि का उपयोग करके आपकी स्क्रिप्ट को कार्यान्वित करने से कई वेबसाइटों पर ट्रैकिंग टूट जाएगी - इसका उपयोग न करें
  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 डाउनलोड https://ssl.google-analytics.com/ga.js , और इसे ga.js रूप में सहेजें।
http://s10.histats.com/js15_as.js डाउनलोड करें, और इसे js15_as.js रूप में js15_as.js

विधि 2: एक अद्यतित जीए इंजेक्शन

यदि आप जीए का एक अद्यतित संस्करण चाहते हैं, तो कोड को इंजेक्ट करने का एक ठोस तरीका उपयोग किया जाना चाहिए, क्योंकि सामग्री स्क्रिप्ट को बाहरी यूआरएल से शामिल नहीं किया जा सकता है

इस उत्तर का एक पुराना संस्करण इस उद्देश्य के लिए पृष्ठभूमि पृष्ठ और chrome.tabs.executeScript पर निर्भर था, लेकिन क्रोम 20 के बाद से, एक बेहतर विधि उपलब्ध हो गई है: जावास्क्रिप्ट कोड को कैश करने के लिए chrome.storage API का उपयोग करें। कोड को अद्यतन रखने के लिए, मैं भंडारण में "अंतिम अद्यतन" टाइमस्टैम्प संग्रहीत करूंगा; आप इसके बजाय chrome.alarms API का भी उपयोग कर सकते हैं।

नोट: यदि आपके पास इंटरनेट कनेक्शन नहीं है, तो आपके एक्सटेंशन में बाहरी फ़ाइल की स्थानीय प्रति शामिल करना न भूलें। इंटरनेट कनेक्शन के बिना, Google Analytics वैसे भी काम नहीं करेगा।

सामग्री स्क्रिप्ट, 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> भी पर्याप्त है।
  • वैकल्पिक : unlimitedStorage - यदि आप chrome.storage साथ डेटा का एक बड़ा टुकड़ा स्टोर करना चाहते हैं।






content-script