web-dev-qa-db-fra.com

exécuter le script js en extension chrome au chargement de la page

J'ai besoin de construire une extension chrome qui manipule dom Je suis un tutoriel et maintenant J'ai ce manifeste.json:

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

Ceci est mon popup.html:

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: Ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
    <script src="popup.js"></script>
    <script type="text/javascript">console.log('attempt #0 to console log something');</script>
  </head>
  <body>
    <div id="status"></div>
    <img id="image-result" hidden>
  </body>
</html>

Et voici mon popup.js:

document.addEventListener('DOMContentLoaded', function() {
  console.log('attempt #3');
});


chrome.tabs.onUpdated.addListener(
function ( tabId, changeInfo, tab )
{ 
  if ( changeInfo.status === "complete" )
  {
    chrome.tabs.executeScript({ code: "console.log('attempt #4');" }, function() {
       console.log("console.log(attempt #5)");
   });
  }
});

Comme vous pouvez le constater, j’ai essayé de différentes manières de consigner quelque chose après la page chargée mais aucune d’entre elles ne fonctionne Que dois-je faire?

javascriptjquerygoogle-chromegoogle-chrome-extension
5
user2950593

Donc, je pense que la solution simple consiste simplement à créer un script de contenu et à attendre que la page soit chargée:

manifest.json

{

 "manifest_version": 2,
 "name": "Getting started example",
"description": "This extension shows a Google Image search result for the   current page",
"version": "1.0",
"content_scripts": [
 {
    //Set your address you want the extension will work in mataches!!! 
 "matches": ["http://mail.google.com/*", "https://mail.google.com/*"],
  "js": ["content.js"],
  "run_at": "document_end"
 }
],  
"permissions": [
              "activeTab",
"https://ajax.googleapis.com/"
             ],
 "browser_action": {
 "default_icon": "icon.png",
 "default_popup": "popup.html"
 }

}

content.js

window.onload=function(){
     console.log("page load!");
}

Vous pouvez également utiliser un message passant entre background.js et votre page de contenu et vérifier si cet onglet est chargé, mais pour votre cas, je pense que cela suffit. 

6
OriEng

Voici comment je fais:

manifest.json

...
"background": {
    "scripts": [
        "assets/js/background.js"
    ],
    "persistent": false
},
....

background.js

function openOrFocusOptionsPage() {
    var optionsUrl = chrome.extension.getURL('popup.html'); 
    chrome.tabs.query({}, function(extensionTabs) {
        var found = false;
        for(var i=0; i < extensionTabs.length; i++) {
            if(optionsUrl == extensionTabs[i].url) {
                found = true;
                chrome.tabs.update(extensionTabs[i].id, {"selected": true});
            }
        }
        if(found == false) {
            chrome.tabs.create({url: "popup.html"});
        }
    });
}

chrome.extension.onConnect.addListener(function(port) {
    var tab = port.sender.tab;


    port.onMessage.addListener(function(info) {
        var max_length = 1024;
        if(info.selection.length > max_length)
            info.selection = info.selection.substring(0, max_length);
        openOrFocusOptionsPage();
    });
});


chrome.browserAction.onClicked.addListener(function(tab) {
    openOrFocusOptionsPage();
});
1
Lucas Franco