1

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

mainifest.json 

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

背景.js

chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript(null, { file: "grid.js" });
});

网格.js

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

3 回答 3

0

我会尝试LocalStorage在您单击扩展程序的浏览器操作的同时保存信息。

然后在您的 content_script 中，您可以在 LocalStorage 中检查该信息并显示菜单，而无需按下扩展按钮。

简而言之，我的意思是：

manifest.js

"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
   }
 ],

背景.js

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');
});
});

内容.js

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>")
    });
}
于 2013-05-21T14:47:51.693 回答
0

MythThrazz 的解决方案会导致以下行为：

  1. 一旦用户单击扩展按钮，持久菜单将被添加到当前选项卡。
  2. 如果用户选择另一个选项卡并重新加载此选项卡，则永久菜单也将出现在此选项卡上。

如果是这样，可以使用 url 作为键，而不是使用“show_menu”作为键。这将允许用户启动每个 url 的持久菜单。

于 2013-05-22T13:01:17.153 回答
0

清单.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
        }
    ]
}

扩展.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());
        });
    });
});

浏览器.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>");
            }
        }
    }
}
于 2013-07-05T10:00:34.790 回答