Question

我需要构建一个操作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)");
   });
  }
});

正如您所看到的，我尝试了各种方法来控制页面加载后的日志记录，但没有一个工作我该怎么办？

Answer 1

所以我认为简单的解决方案只是创建一个内容脚本，并等待页面加载：

的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和你的内容页面之间的消息传递，并检查选项卡是否已加载，但对于你的情况，我认为这已经足够了。

Answer 2

我就是这样做的：

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

在页面加载时在chrome扩展中运行js脚本

2 个答案: