Javascript 在chrome扩展中操作DOM

我正试图学习chrome扩展，但我无法理解如何使用

content\u脚本操作页面的
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);

function myfunc(){

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

}

$(document).ready(function(){

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

});

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

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

popup1.js

function check(tab_id, data, tab){

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

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

function myfunc(){

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

}

$(document).ready(function(){

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

});

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

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

上面的代码/扩展工作正常，因为调用了
myfunc
，但它没有将
Test
注入
google.com
的主体中

那么，在访问/操作DOM时，我哪里出了问题。
如果您想在弹出窗口时使用浏览器选项卡DOM。在这种情况下，您必须从
后台脚本
向
内容脚本
传递消息，或
将JavaScript
注入
内容脚本
：看一看

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);

test.js（用于后台）

首先，您不需要绑定到
ready
，因为您的内容脚本是在
document\u idle
（默认）下执行的，这保证会在DOM准备好之后执行。其次，请提供有关您在
myfunc
中看到的内容的更多信息：您可能在console中有一些错误，或者您忽略了正文中添加的文本。我不确定，是不是
$（“body”）.append（document.createTextNode（“Test”）
？顺便说一句，如果在添加后关闭窗口，如何检查主体？另外，我想确保您不会将
popup1.js
加载到popup.html中，并尝试将
popup1.js
同时作为网页和弹出窗口的一部分来完成一些技巧。你的要求是什么？为什么要将内容脚本命名为“popup”？@Stan：我试图实现的是，每当从下拉列表中触发更改事件时，
TEST
就会附加到
google.com
的主体中。当前正在发生的事情是将
TEST
插入我的
popup.html
，当我单击页面上的操作图标时，它会出现。这是我的问题，你为什么使用“弹出窗口”？您根本不应该使用“弹出窗口”来实现此目的。不要将弹出窗口中的脚本（如果您需要用于其他任务）和内容脚本（注入外部网页）混合在一起。您的代码工作正常。但我需要添加一个事件侦听器，以在下拉列表中查找所选值的更改。因此，只要我添加
$（document）.ready（function（）{$（'#options'）.change（myfunc）；}）保持休息以上代码都不起作用。我已经更新了我的答案，看一看并告诉我，如果有什么问题。。谢谢你更新的代码。我试过了，但仍然没有在html页面中添加任何内容。我尝试过调试，发现调用了
appendTextToBody
，并且
text
的值也是必需的，但是
chrome.tabs.executeScript（tab.id，{“code”：“$（“body”）.append（“Test:”+text+）；“}）未按要求工作。可能JQuery不存在，请尝试以下操作：
chrome.tabs.executeScript（tab.id，{“code”：“var my_span=document.createElement（'span'）；my_span.innerHTML（“Test:”；document.body.appendChild（my_span）}）而不是
$（“正文”）。追加（“测试：“+text+”）chrome.tabs.executeScript（tab.id，{“code”：“alert（'hello'）”}）并且它不工作。现在已经很晚了，所以我会在早上再试一次，然后再给你回复。谢谢你的帮助。