크롬 확장의 영구 HTML 메뉴

Question

확장 버튼을 클릭하면 웹 페이지 상단에 메뉴가 나타납니다. 메뉴를 다시로드하고 도메인을 탐색 할 때 메뉴를 유지하고 싶습니다. 가능합니까?

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

background.js

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

grid.js

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

Answer 1

내가하려고 것 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 
    } 
], 

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

content.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>") 
    }); 
} 

Answer 2

겠습니까 MythThrazz의 솔루션 결과 : 사용자 일단

1. 은 지속적인 메뉴는 현재 탭에 추가 될 확장 버튼을 클릭합니다.
2. 사용자가 다른 탭을 선택하고이 탭을 다시로드하면이 탭에도 영구 메뉴가 나타납니다.

"show_menu"를 키로 사용하는 대신 url을 키로 사용할 수 있습니다. 그러면 사용자는 URL 당 영구 메뉴를 시작할 수 있습니다.

Answer 3

의 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로 :

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