在Chrome扩展中操纵DOM

我想了解有关Chrome扩展的知识，但我无法理解如何使用content_scripts操纵页面的DOM。在Chrome扩展中操纵DOM

的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错误。

来源

2012-12-29 RanRag

首先，你不需要绑定到'ready'，因为你的内容脚本在'document_idle'处执行（默认），这保证在DOM准备就绪后发生。其次，请提供更多关于你在'myfunc'中看到的信息：或者你在控制台中可能存在一些错误，或者你确实忽视了正文中添加的文本。我不确定，是不是'$（“body”）。append（document.createTextNode（“Test”））;'？ – Stan

顺便说一句，如果您在追加后关闭窗口，您如何检查身体？ – Stan

另外我想确保你不会将'popup1.js'加载到popup.html中，并尝试使用'popup1.js'作为网页的一部分并在弹出窗口中完成一些技巧时间。你有什么要求？为什么你将内容脚本命名为“弹出”？ – Stan

如果你想在浏览器标签DOM上弹出事件弹出。在这种情况下，你必须从background script，或inject JavaScript传递一条消息content script到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);

来源

2012-12-29 17:21:54

你的代码工作正常。但我需要添加一个事件侦听器来查找下拉列表中选定值的更改。因此，只要我添加'$（document）.ready（function（）{（'＃options'）。change（myfunc）; }）;'保持所有相同的上述代码不会'工作。 – RanRag

我已更新我的答案，请看看并告诉我，如果有什么问题..谢谢 –

感谢您的更新代码。我尝试过，但它仍然没有附加任何东西到页面的HTML。我尝试调试，发现'appendTextToBody'被调用，'text'的值也是需要的，但是'chrome.tabs.executeScript（tab.id，{“code”：'$（“body”）。append（ “测试：”'+ text +'）;'}）;'不按要求工作。 – RanRag

在Chrome扩展中操纵DOM

回答

相关问题