Jquery chrome扩展中的持久html菜单

我有一个菜单，当您单击扩展按钮时，它会显示在网页顶部。我希望菜单保持在页面重新加载和导航域时-这是可能的吗

mainifest.json

background.js

grid.js

我会尝试在您单击扩展的浏览器操作的同时使用LocalStorage来保存信息

然后在content_脚本中，您可以在LocalStorage中检查该信息并显示菜单，而无需按扩展按钮

简而言之，我的意思是：

manifest.js

background.js

content.js

---

Mythrazz的解决方案是否会导致以下行为：

一旦用户单击扩展按钮，持久菜单将添加到当前选项卡。 如果用户选择另一个选项卡并重新加载此选项卡，则此选项卡上也会出现持久菜单。 如果是这样，可以使用url作为键，而不是使用show_菜单作为键。这将允许用户根据url启动持久菜单。

manifest.json:

{
    "name": "permenu",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": {
            "19": "19icon.png"
        },
        "default_title": "permenu"
    },
    "background": {
        "scripts": ["extension.js", "jquery-2.0.0.js"],
        "persistent": true
    },
    "permissions": [
        "tabs"
    ],
    "content_scripts": [
        {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["browser.js", "jquery-2.0.0.js"],
            "all_frames": true
        }
    ]
}

extension.js：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendMessage(tab.id, {command: "add" }, function(response) {
            console.log(response.toString());
        });
    });
});

browser.js：

chrome.runtime.onMessage.addListener(function(msg) {
    if (msg.command == "add") {
        doAdd("click");
    }
});

document.onreadystatechange = function() {
    if(document.readyState == "complete") {
        doAdd("onreadystatechange");
    }
};

function doAdd(reason) {
    if(reason == "click") {
        if(document.getElementById("add") == null) {
            localStorage[location.href] = "ready";
            $("body")
              .append("<ul id='menu'><li><a id='add' href='#'>Add div</a></li></ul>");
        }
    } else if(reason == "onreadystatechange") {
        if(localStorage[location.href] == "ready") {
            if(document.getElementById("add") == null) {
                $("body")
                  .append(
                     "<ul id='menu'><li><a id='add' href='#'>Add div</a></li></ul>");
            }
        }
    }
}

---

浏览器操作的localStorage与扩展绑定，内容脚本的localStorage属于页面。这个建议行不通。Chrome的API可以在扩展脚本和内容脚本之间发送信息，为什么行不通呢？你的回答还不清楚。如果您通过改进答案来消除这种模糊性，我将删除下一票。谢谢，但它似乎是按每个选项卡的方式工作的。按选项卡的方式只适用于其他选项卡中加载的站点域与单击的站点域不同的情况。在测试中，第二个选项卡的url与第一个选项卡的url来自同一个域，但url不同，尽管菜单会在页面加载时添加。也许这就是你在某些情况下想要的。但是，值得注意的是，从内容脚本创建的localStorage条目是域范围的完整域。很抱歉，您是100%，正确的。您知道如何将扩展限制在当前选项卡的范围内吗？是否尝试使用当前页面的url作为键而不是“显示菜单”键值？这应该能奏效。

"background": {
"scripts": ["background.js"],
"persistent": true
 },
  "content_scripts": [
   {
    "matches": ["http://*/*"],
  "css": ["grid.css"],
  "js": ["jquery-2.0.0.min.js", "content.js"],
       "all_frames": true
   }
 ],

chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript(null, { file: "grid.js" });
   chrome.tabs.sendMessage(tab.id, {menu:'show'}, function(response) {
    console.log('Persistent menu started');
});
});

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.menu === "show")
    {
        localStorage.setItem("show_menu", "Yes");
    }
  });

var showMenu = localStorage.getItem("show_menu");

if(showMenu === "Yes")
{
    $(document).ready(function() {
        $("body").append("<ul id='menu'><li><a id='add' href='#'>Add div</a></li></ul>")
    });
}

{
    "name": "permenu",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": {
            "19": "19icon.png"
        },
        "default_title": "permenu"
    },
    "background": {
        "scripts": ["extension.js", "jquery-2.0.0.js"],
        "persistent": true
    },
    "permissions": [
        "tabs"
    ],
    "content_scripts": [
        {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["browser.js", "jquery-2.0.0.js"],
            "all_frames": true
        }
    ]
}

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendMessage(tab.id, {command: "add" }, function(response) {
            console.log(response.toString());
        });
    });
});

chrome.runtime.onMessage.addListener(function(msg) {
    if (msg.command == "add") {
        doAdd("click");
    }
});

document.onreadystatechange = function() {
    if(document.readyState == "complete") {
        doAdd("onreadystatechange");
    }
};

function doAdd(reason) {
    if(reason == "click") {
        if(document.getElementById("add") == null) {
            localStorage[location.href] = "ready";
            $("body")
              .append("<ul id='menu'><li><a id='add' href='#'>Add div</a></li></ul>");
        }
    } else if(reason == "onreadystatechange") {
        if(localStorage[location.href] == "ready") {
            if(document.getElementById("add") == null) {
                $("body")
                  .append(
                     "<ul id='menu'><li><a id='add' href='#'>Add div</a></li></ul>");
            }
        }
    }
}