run js script in chrome extension on page load

I need to build a chrome extension that manipulates dom I am following some tutorial and now I have this 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",

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

This is my 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>

And this is my 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)");
   });
  }
});

As you can see I tried various ways to console log something after page loaded but none of them work what do I do?

标签： javascript jquery google-chrome google-chrome-extension

2条回答

干净又极端

2楼-- · 2020-06-16 04:48

So I think that the simple solution is just to create a content script and there to wait until the page is load :

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

You could also use with message passing between background.js and your content page and to check that tab is loaded but for your case I think it's enough.

0人赞添加讨论(0) 举报

不美不萌又怎样

3楼-- · 2020-06-16 04:56

This is how I do:

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

0人赞添加讨论(0) 举报

run js script in chrome extension on page load

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间