用js获取网页DOM（例：input标签的ID）的chrome插件

最新推荐文章于 2026-06-21 15:59:47 发布

原创最新推荐文章于 2026-06-21 15:59:47 发布 · 6.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#web #chrome插件 #javascript #js #chrome

chrome插件同时被 2 个专栏收录

7 篇文章

订阅专栏

页面间通信

1 篇文章

订阅专栏

这是一个教程，教你如何创建一个Chrome插件，该插件在页面加载完成后能显示所有input标签的ID。通过修改manifest.json文件和使用JavaScript，实现了页面间的通信功能。

</pre><p>在JavaScript中有多钟获取DOM元素的方法，常见的有getElementById、getElementsByName、getElementsByTagName、getElementsByClassName，分别是通过id、name、标签名和类名获取元素，注意只有第一个是Element，其他三个都是Elements，因为HTML中元素名必须唯一，其他则不必。下面就以获取网页input标签的ID为例：</p><p>1、</p><p>manifest.json:</p><p></p><pre name="code" class="html">{
    "manifest_version":2,
    "version":"1.0",
    "name":"getid",
    "description":"get elements'id",
    "icons":{
        "16":"images/icon16.png"
    },
    "content_scripts":[
        {
         "matches":["*://*/*"],
         "js":["js/content.js"]
         }
    ]
}

conten.js:

window.onload = function(){
    var list=document.getElementsByTagName("input");
    var strData;
    for(var i=0;i<list.length && list[i];i++)
    {
        if(list[i].type == "text"&&list[i].id != "subEmail")
        {
            strData=list[i];
			alert(strData.id);
        }
    }
}

加载插件成功后，重新载入页面，即可看到弹框显示的每个input的ID。

2、要是想通过页面间的通信来实现上面的功能：函数如下：

manifest.json:

{
    "manifest_version":2,
    "version":"1.0",
    "name":"getid",
    "description":"get elements'id",
    "icons":{
        "16":"images/icon16.png"
    },
    "background":{
        "scripts":[
           "js/background.js"
        ]
    },
    "content_scripts":[
        {
         "matches":["*://*/*"],
         "js":["js/content.js"]
         }
    ]
}

background.js:

/**
 * Created by Administrator on 15-1-4.
 */
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    alert("ID都有"+message);
	});

content.js:

/**
 * Created by Administrator on 15-1-4.
 */
window.onload = function(){
    var list=document.getElementsByTagName("input");
    var strData;
    for(var i=0;i<list.length && list[i];i++)
    {
        if(list[i].type == "text"&&list[i].id != "subEmail")
        {
            strData=list[i];
			chrome.runtime.sendMessage(strData.id);
        }
    }

}