Làm cách nào để chèn HTML bằng tiện ích mở rộng của chrome?

Question

Tôi có tùy chọn menu ngữ cảnh và khi được chọn, tôi muốn chèn một số HTML. Tôi đã thử làm điều này

var div=document.createElement("div"); 
document.body.appendChild(div); 
div.innerText='test123'; 

Nhưng nó không hiệu quả với tôi.

Lưu ý Tôi đang cố tránh sử dụng jQuery.

Answer 1

Here bạn có thể nghiên cứu cách tạo tiện ích mở rộng và tải xuống tệp manifest.json mẫu.

Content Scripts có thể được sử dụng để chạy js/css khớp với một số url nhất định.

manifest.json

{ 
    "name": "Append Test Text", 
    "description": "Add test123 to body", 
    "version": "1.0", 
    "permissions": [ 
    "activeTab" 
    ], 
    "content_scripts": [ 
    { 
     "matches": ["http://*/*"], 
     "js": ["content-script.js"] 
    } 
    ], 
    "browser_action": { 
    "default_title": "Append Test Text" 
    }, 
    "manifest_version": 2 
} 

nội dung script.js

var div=document.createElement("div"); 
document.body.appendChild(div); 
div.innerText="test123"; 

trên sẽ thực hiện content-script.js cho tất cả các url phù hợp với http://*/* nơi * là một ký tự đại diện. về cơ bản tất cả đều là http trang.

Tập lệnh nội dung có nhiều thuộc tính có thể tìm thấy trong liên kết ở trên.

Programmatic injection có thể được sử dụng khi không được chèn js/css vào mọi trang phù hợp với mẫu.

Dưới đây cho thấy làm thế nào để thực hiện js onclick của biểu tượng mở rộng: -

manifest.json

{ 
    "name": "Append Test Text", 
    "description": "Add test123 to body", 
    "version": "1.0", 
    "permissions": [ 
    "activeTab" 
    ], 
    "background": { 
    "scripts": ["background.js"], 
    "persistent": false 
    }, 
    "browser_action": { 
    "default_title": "Append Test Text" 
    }, 
    "manifest_version": 1 
} 

background.js

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript({ 
    code: 'var div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";' 
    }); 
}); 

này sử dụng executeScript phương pháp, cũng có tùy chọn gọi một tiếng tập tin arate như vậy: -

background.js

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

insert.js

var div=document.createElement("div"); 
document.body.appendChild(div); 
div.innerText="test123";