làm cách nào để bật/tắt content_scripts trong tiện ích mở rộng của google?

Question

Tôi có phần mở rộng đơn giản này, nó hiển thị biểu tượng trên thanh công cụ của chrome và hiển thị nút bật/tắt. tôi muốn thêm chức năng cho nút để vô hiệu hóa hoặc kích hoạt các content_script.js bắn những viên đạn vào thăm google website:

popup.js

var setLayout = function(){ 
    var list = document.createElement('ul'); 

    var enable = document.createElement('li'); 
    enable.appendChild(document.createTextNode('Enable Script')); 
    enable.onclick = function(){toggle(0)}; 

    var disable = document.createElement('li'); 
    disable.appendChild(document.createTextNode('Disable Script')); 
    disable.onclick = function(){toggle(1)}; 

    list.appendChild(disable); 
    document.body.appendChild(list); 

    function toggle(n){ 
     list.removeChild(n == 0 ? enable : disable); 
     list.appendChild(n == 0 ? disable : enable); 
    } 
}; 

document.addEventListener('DOMContentLoaded', setLayout, false); 

manifest.json

{ 
    "manifest_version": 2, 

    "name": "test", 
    "description": "test", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["https://www.google.co.uk/"], 
     "js": ["content_scripts.js"] 
    } 
    ] 
} 

content_scripts.js

(function(){ 
    alert('hello'); 
})(); 

Tôi mới làm quen với các tiện ích mở rộng của google và không biết cách làm điều đó , tôi nghĩ về việc thay đổi các biểu hiện sau khi nhấp vào vô hiệu hóa/kích hoạt các nút nhưng không thể tìm thấy đúng lệnh để làm như vậy sau khi đọc các tài liệu trên trang web google!

mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Sau một số nghiên cứu, tôi đã tìm ra cách giải quyết vấn đề này bằng cách sử dụng backround pages, sendMessage và localstorage.

background pages hoạt động như một người giao tiếp giữa popup.js và content_scripts.js, chúng có hai tài liệu khác nhau và không thể chuyển trực tiếp các biến giữa chúng.

Để kích hoạt trang nền trong mamifest tôi nói thêm:

"background": { 
"scripts": ["background.js"], 
"persistent": true 
}, 

localstorage tiết kiệm biến tại địa phương và ghi nhớ chúng ngay cả khi trình duyệt được đóng và mở lại, vì vậy khi cho phép/nút vô hiệu hóa được nhấp nó thiết lập localStorage['status'] = 1/0 mà có thể được truy cập thông qua background.js và được chuyển đến content_scripts.js.

Để thiết lập biến localStorage i thêm vào popup.js:

if(!localStorage.status) localStorage['status'] = 1; 
toggle(2); 
enable.onclick = function(){toggle(0)}; 
disable.onclick = function(){toggle(1)}; 
function toggle(n){ 
    if((n == 0) && (enable.parentNode == list)){ 
     list.removeChild(enable); 
     list.appendChild(disable); 
     localStorage.status = 1; 
    }else if((n == 1) && (disable.parentNode == list)){ 
     list.removeChild(disable); 
     list.appendChild(enable); 
     localStorage.status = 0; 
    }else if((n == 2) && (!list.hasChildNodes())){ 
     list.appendChild((localStorage.status == 1) ? disable : enable); 
     chrome.browserAction.setIcon({path: (localStorage.status == 1) ? "icons/icon19.png" : "icons/icon19_disabled.png"}); 
    }else{ 
     return; 
    } 
} 

Để vượt qua localStorage.status để content_scripts.js tôi đã phải sử dụng sendMessage trên content_scrips.js mà trên tải thông điệp gửi yêu cầu đến background.js, và onMessage trên background.js mà lắng nghe yêu cầu và gửi trả lời tới content_scripts.js với giá trị localStorage.status.

background.js:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if (request.type == "status") sendResponse({status: localStorage.status}); 
}); 

content_scripts.js

var fn = function(){...}; 
chrome.runtime.sendMessage({type: "status"}, function(response) { 
    if(response.status == 1) fn(); 
    return; 
}); 

Đó là, hy vọng ai đó thấy nó hữu ích.

Answer 2

Hãy thử injecting the content script sử dụng mã chứ không phải là file manifest, một cái gì đó như thế này:

chrome.tabs.executeScript(null, {file: "content_script.js"}); 

Sau đó bạn có thể sử dụng message passing giữa trang nền và kịch bản nội dung của bạn để quyết định có hay không để tiêm kịch bản nội dung, hoặc có lẽ một câu lệnh if trong chính kịch bản nội dung chỉ chạy khi một cờ được đặt bởi nút hành động của tiện ích.

Bạn có thể sử dụng browser action event để phát hiện khi nhấn nút tác vụ.