在chrome扩展中操作DOM

Question

我正在尝试了解chrome扩展,但我无法理解如何使用操作DOM页面content_scripts.

的manifest.json

{
    "name": "First",
    "version": "1.0",
    "manifest_version": 2,
    "description": "First extension",
    "background": {
        "scripts": ["test.js"]
    },

    "page_action": {

        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },

    "content_scripts": [ {
        "js": [ "jquery.min.js", "popup1.js"  ],
        "matches": [ "http://*/*", "https://*/*" ]

    } ],

    "permissions" : [
        "tabs",
        "http://*/*"
            ]
}

test.js

function check(tab_id, data, tab){

    if(tab.url.indexOf("google") > -1){
        chrome.pageAction.show(tab_id);
            }

};
chrome.tabs.onUpdated.addListener(check);

popup1.js

function myfunc(){

    var x = $('#options option:selected').text();
    $("body").append('Test');
    alert(x);
    //window.close();

}

$(document).ready(function(){

    $('#options').change(myfunc);

});

上面的代码/扩展工作正常,因为myfunc被调用但它没有注入Test到正文中google.com.

那么,我在访问/操作DOM时出错了.

Answer 1

如果您想在弹出事件中使用浏览器选项卡DOM.在这种情况下,你必须传递一条消息content script从background script,或inject JavaScript到content script:看看

的manifest.json

{
    "name": "First",
    "version": "1.0",
    "manifest_version": 2,
    "description": "First extension",
    "background": {
        "scripts": ["test.js"]
    },    
    "page_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },    
    "content_scripts": [ {
        "js": [ "jquery.min.js", "content_script.js"  ],
        "matches": [ "http://*/*", "https://*/*" ]    
    } ],

    "permissions" : [
        "tabs",
        "http://*/*"
            ]
}

content_script.js

function myfunc(){
    var x = $('#options option:selected').text();
    $("body").append('<div style="width:200px; height:200px; border: 1px solid red;"></div>');
}

$(document).ready(myfunc);

现在,您将进入A box with red border页面底部.

popup.js

function myfunc(){
    var x = $('#options option:selected').text();
    chrome.extension.sendMessage({sel_text: x});
}

$(document).ready(function(){
    $('#options').change(myfunc);
});

test.js(在后台使用)

chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    appendTextToBody(request.sel_text);
  });

function appendTextToBody(text) {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.executeScript(tab.id, {"code" : '$("body").append("Test : "'+text+');'}) ;
  });
}

function check(tab_id, data, tab){
    if(tab.url.indexOf("google") > -1){
        chrome.pageAction.show(tab_id);
    }
};
chrome.tabs.onUpdated.addListener(check);