Question

这是我的场景：通过单击浏览器图标，我在整个页面旁边创建一个侧边栏（html和css），从而创建两列（一个是我的侧边栏，另一个是实际页面）。

我要实现的是当我重新加载页面或导航到同一域内的另一个页面时保留侧边栏。我现在所拥有的只是创建侧边栏，但每次导航或重新加载网页时都必须单击浏览器操作。

清单：

{
  "name": "apdrop",
  "version": "0.1",
  "manifest_version": 2,
  "description": "first prototype for apdrop extension",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },"background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "apdrop"
  },
  "permissions": [
    "background",
    "tabs",
    "http://*/*/",
    "https://*/*/"
  ]
}

Background.js

function injectedScript(tab, method){
    chrome.tabs.insertCSS(tab.id, {file:"style.css"});
    //chrome.tabs.insertCSS(tab.id, {file:"bootstrap.css"});
    chrome.tabs.executeScript(tab.id, { file: 'jquery-2.1.1.min.js'});
    //chrome.tabs.executeScript(tab.id, { file: 'bootstrap.min.js'});
    chrome.tabs.executeScript(tab.id, { file: 'inject.js'});
}

function click(tab){
    console.log("browser action clicked");
    injectedScript(tab, 'click');
    //alert("action button was clicked");
}

chrome.browserAction.onClicked.addListener(click);

Inject.js

var ev = $("body > *");
    if (!document.getElementById('contentxf343487d32')) 
    {
        ev.wrapAll("<div id='insidecontent65675f526567'>");
        $("#insidecontent65675f526567").wrapAll("<div id='contentxf343487d32'>");

        $("<div id='sidebar343gf87897fh'><div id='insidesidebar87678bbbb'><p>this is my name</p></div></div>").insertBefore("#contentxf343487d32");
    }
    else
    {       
        $("#sidebar343gf87897fh").remove();
        $("#insidecontent65675f526567").unwrap();
        $("#insidecontent65675f526567 > div").unwrap();
    }

希望这有助于澄清一点。

Answer 1

最简单的策略是在域sessionStorage中保存状态，并使用“检测器”脚本重新注入您的UI。

在内容脚本中添加设置状态：

// inject.js
if (!document.getElementById('contentxf343487d32')) 
{
    // ...
    sessionStorage["contentxf343487d32"] = true;
}
else
{       
    // ...
    sessionStorage["contentxf343487d32"] = false;
}

添加“探测器”脚本：

// detect.js
if(sessionStorage["contentxf343487d32"])
{
    chrome.runtime.sendMessage({injectSidebar: true});
}

始终通过清单在页面加载时注入脚本（并更改为更好的权限）：

"content_scripts" : [
    {
       "matches": ["<all_urls>"],
       "js": ["detect.js"]
    }
],
"permissions": [
    "background",
     "tabs",
     "<all_urls>"
]

在后台，根据消息注入脚本：

// background.js
chrome.runtime.onMessage.addListener( function (message, sender, sendResponse){
    if(message.injectSidebar)
    {
      click(sender.tab);
    }
});

如果您需要比sessionStorage提供的更多持久性，请使用localStorage。如果您需要不同的逻辑，您仍然可以使用探测器的这个骨架来指示背景。

Chrome扩展程序：单击浏览器操作后，仅对当前域名执行

1 个答案: