chrome/common/extensions/docs/examples/howto/userscript-runat/runat.user.js

   1 // ==UserScript==
   2 // @name           Userscript @run-at example.
   3 // @version        1.0.1
   4 // @namespace      runat
   5 // @description    This script demonstrates @runat by listing which resources
   6 //                 the current page has loaded.
   7 // @include        *
   8 // @run-at         document-start
   9 // ==/UserScript==
  10
  11 /*
  12  * Copyright (c) 2011 The Chromium Authors. All rights reserved.
  13  * Use of this source code is governed by a BSD-style license that can be
  14  * found in the LICENSE file.
  15  */
  16
  17 var urls = {};
  18 var count = 0;
  19
  20 /**
  21  * Called whenever the page loads a subresource.
  22  * Logs all loaded URLs in the urls var.
  23  */
  24 document.addEventListener('beforeload', function(evt) {
  25   if (!urls[evt.url]) {
  26     urls[evt.url] = 0;
  27     count++;
  28   }
  29   urls[evt.url]++;
  30 }, true);
  31
  32 /**
  33  * Called when the window is finished loading.
  34  * Loops through the urls var and prints its contents to the page DOM.
  35  */
  36 window.addEventListener('load', function() {
  37   if (count == 0) {
  38     return;
  39   }
  40
  41   // Create and style inserted DOM elements.
  42   var urls_dom = document.createElement('ul');
  43   urls_dom.style.cssText = [
  44       'margin: 4px 0 !important;',
  45       'padding: 0 !important;',
  46       'width: 98%;',
  47       'word-wrap: break-word;',
  48       'max-height: 200px;',
  49       'overflow: auto;'
  50   ].join(' ');
  51   var wrap_dom = document.createElement('div');
  52   wrap_dom.style.cssText = [
  53       'background-color: #ff7357;',
  54       'background-image: -webkit-repeating-linear-gradient(' +
  55           '-45deg, transparent, transparent 35px,' +
  56           'rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 70px);',
  57       'color: #000;',
  58       'padding: 10px;',
  59       'font: 14px Arial;'
  60   ].join(' ');
  61   var title_dom = document.createElement('strong');
  62   title_dom.textContent = (count > 1) ?
  63       'This page has loaded the following resources:' :
  64       'This page loaded the following resource:';
  65   wrap_dom.appendChild(title_dom);
  66   wrap_dom.appendChild(urls_dom);
  67
  68   // Render each url as a list item containing a link.
  69   for (var url in urls) {
  70     var url_dom = document.createElement('li');
  71     var link_dom = document.createElement('a');
  72     var times_dom = document.createElement('span');
  73     url_dom.style.cssText = [
  74         'list-style-type: disc;',
  75         'margin: 0 0 0 30px !important;',
  76         'padding: 2px !important'
  77     ].join(' ');
  78     link_dom.setAttribute('href', url);
  79     link_dom.setAttribute('target', '_blank');
  80     link_dom.textContent = url;
  81     link_dom.style.cssText = [
  82         'color: #000 !important;'
  83     ].join(' ');
  84     times_dom.textContent = (urls[url] > 1) ?
  85         ' (' + urls[url] + ' times)' :
  86         ' (once)';
  87     url_dom.appendChild(link_dom);
  88     url_dom.appendChild(times_dom);
  89     urls_dom.appendChild(url_dom);
  90   }
  91
  92   // Insert the created DOM into the page.
  93   document.body.style.position = 'relative';
  94   document.body.parentElement.insertBefore(wrap_dom, document.body);
  95 }, true);