나는 같은 F를 구축했다 나의 크롬 연장을 위해 성숙해라. (이 :)를 해결하기 위해 구글을 검색 할 때 너무 많은 이름) 이 나는 다음과 같은 방법으로 응용 프로그램 및 콘텐츠 스크립트의 마사지 사용 를 온/오프 스위치/토글을 생성합니다 :
매니페스트를
모든 페이지 (hover.js)에 내 콘텐츠 스크립트를 삽입하고 내 확장자 스크립트 (background.js)
....
"browser_action": {
"default_icon": {
"19": "icons/icon-active.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["css/hover.css"],
"js": ["js/hover.js"]
}
],
"background" : { "scripts": ["js/background.js"] },
....
배경을 실행.
: JS 여기
우리는 당신이 볼 수 있듯이 3 개 기능이있는 배경 (모든 크롬 창에서 실행) 스크립트를 보낼과를 받게되며 확장자 상태
// start extention as active
var status = true;
// set toggle of extention on browser action click and notify content script
chrome.browserAction.onClicked.addListener(function(tabs) {
if (status == 'true'){
status = false;
chrome.browserAction.setIcon({path: "icons/16x16.png"});
}
else{
status = true;
chrome.browserAction.setIcon({path: "icons/icon-active.png"});
}
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {status: status});
});
});
// check status on tab update and notify content script
chrome.tabs.onActivated.addListener(function() {
if (status == 'true'){
chrome.browserAction.setIcon({path: "icons/icon-active.png"});
}
else{
chrome.browserAction.setIcon({path: "icons/16x16.png"});
}
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {status: status});
});
});
//send extention status on request
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.status == "getStatus")
sendResponse({status: status});
});
을 prepering된다 브라우저 동작 버튼 클릭시 상태를 변경하십시오.
다른 탭으로 이동하여 콘텐츠 스크립트를 알릴 때 상태를 확인하십시오. 각 탭에는 콘텐츠 스크립트의 고유 한 "인스턴스"가 있으므로 하나의 탭에서 비활성화하는 기능은 다른 탭에서 계속 활성화 될 수 있습니다.
콘텐츠 스크립트에서 요청시 상태에 대한 응답을 보냅니다.
각 컨텐츠 스크립트가 먼저 배경 스크립트에 마사지를 전송하여 확장자의 상태를 확인하고 상태 업데이트를받을해야
// check extention status
chrome.runtime.sendMessage({status: "getStatus"}, function(response) {
if (response.status == 'true'){
// check elements mouse is hover
document.addEventListener("mouseover", setLink, true);
}
else{
document.removeEventListener("mouseover", setLink, true);
}
});
// wait for massage from background script
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.status == 'true'){
// check elements mouse is hover
document.addEventListener("mouseover", setLink, true);
}
else{
document.removeEventListener("mouseover", setLink, true);
}
});
콘텐츠 스크립트.
또한 한 탭에서 확장 기능을 해제하면 탭을 변경하면 콘텐츠 스크립트에 변경 사항을 알립니다.
나는이 스크립트의 측면에서 더 나은 수행 할 수 있습니다하지만 난이 도움이되기를 바랍니다 확신 ...
이 아이콘이 페이지에 추가되고, 아니면 당신이 볼 수있는 확장 아이콘을 의미합니까 브라우저 툴바에? – Archer
브라우저 툴바를 생각했습니다. – vermotr
그런 다음 스크립트를 항상 포함해야하지만 버튼을 클릭 할 때 실행하고 싶은 기능 만 호출하면됩니다. 조건부로 무언가를 포함하지 마십시오. 항상 포함 시키십시오. – Archer