Question

我有一个小任务。我需要帮助..我是这个stackoverflow的新手.. 问题是我的扩展..我在各种教程和文章中尝试了很多方法.. 我需要实现这一目标。我有一个扩展名，当我点击它时，它应该捕获页面的当前URL并打开一个新的选项卡，其中包含页面的url和源代码（html结构）..源代码和url必须存储在某个地方..喜欢在一个物体或什么东西..

到目前为止，我已经做到了。

的manifest.json

{
"name": "ncubicx",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
    "default_icon": {
      "19": "img/19x19.png",
      "38": "img/38x38.png"
    },
    "default_title": "That's the tool tip"
},
"permissions": [
  "activeTab",
  "tabs",
  "cookies",
  "contextMenus",
  "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  }
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
   var url = tabs[0].url;
  });
  chrome.tabs.create({url: 'newtab.html'}) ;
});

我不知道如何在newtab.html中显示网址或如何在某个地方存储网址。希望有人帮助我... 提前谢谢..

Answer 1

您可以从url页面抓取tab background html，从content script抓取tab源代码。两者同时打开一个新的html并将对象发送到这个新标签页，您可以自己填充object。

注意：在将new tab发送至tab之前，您需要等待{ "name": "Demo", "version": "0.0.1", "manifest_version": 2, "description": "practice", "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }, "default_locale": "en", "background": { "scripts": [ "src/bg/background.js" ], "persistent": true }, "browser_action": { "default_icon": "icons/icon19.png", "default_title": "browser action demo" }, "permissions": [ "https://*/*","tabs" ], "content_scripts": [ { "matches": [ "https://*/*" ], "js": [ "js/jquery/jquery.min.js", "src/content/content.js" ] } ] }加载。所以我添加了一张支票。

这里是整个代码：

<强>的manifest.json ：

chrome.browserAction.onClicked.addListener(function(){

    chrome.tabs.query({active: true,currentWindow: true}, function(tabs){
        var url = tabs[0].url;
        chrome.tabs.sendMessage(tabs[0].id, {message : "getHtml"},function(response){
           var html = response.html;
            var obj ={
                tabUrl : url,
                tabHtml : html
            };
            createNewtab(obj);
        });

});
});

function createNewtab(obj){
    var targetId = null;
     chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {

      if (tabId != targetId || changedProps.status != "complete")
        return;

    chrome.runtime.sendMessage({message: "loadNewTab", data: obj});     

     });

    var newTabUrl = chrome.extension.getURL('newTab.html');
      chrome.tabs.create({ url: newTabUrl}, function(tab) {
         targetId = tab.id;         
        });
}

<强> background.js：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    switch (request.message){
        case "getHtml":
            var src = $("html").html();
            sendResponse({html: src});
            break;
    }
});

<强> content.js：

<html>
<head>
    <script src="src/newTab.js"></script>

    </head>
<body>

    //You can populate data as you like
    </body>

</html>

<强> newTab.html：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    switch (request.message){
        case "loadNewTab":
            console.log(request.data);
            //You have the object as request.data with tabUrl and tabHtml
            break;
    }
});

<强> newTab.js：

EXTRACT

Chrome扩展程序 - 如何将值传递到后台页面

1 个答案: