web-dev-qa-db-ja.com

chromeページ読み込み時に拡張機能でjsスクリプトを実行する

私はいくつかのチュートリアルに従っているdomを操作するchrome拡張機能を構築する必要があり、今この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/"
  ]
}

これは私の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>

そして、これが私の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)");
   });
  }
});

ご覧のとおり、ページが読み込まれた後にコンソールログにさまざまな方法を試しましたが、どれも機能しません。

javascriptjquerygoogle-chromegoogle-chrome-extension
8
user2950593

だから私は単純な解決策はコンテンツスクリプトを作成し、ページがロードされるまで待つことだと思います：

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

Background.jsとコンテンツページの間でメッセージパッシングを使用して、タブがロードされていることを確認することもできますが、あなたの場合はそれで十分だと思います。

7
OriEng

これが私のやり方です：

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