1.新建一个文件夹
2. 文件夹内写入manifest.js
{
// manifest的版本
"manifest_version":3,
// 扩展的名字
"name":"ChromeExtensionTest",
// 扩展的版本
"version" : "1.0.0",
// 扩展的描述
"description": "Chrome Extension Test",
//图标
"icons": { "128": "icon.png" },
//网页内运行脚本
"content_scripts": [
{
"matches": [ "*://*/*" ],
"js": [ "content1.js"]
}
]
}
content_scripts指向的脚本就是可以在浏览器网页内运行的脚本,和一般的javascript一样的写法,可以直接调用网页内所有对象操作。
比如在content1.js中这样写,可以将页面内所有超链接文本和链接显示在页面的一个div中:
console.log("chrome extension content js 1");
var as=document.querySelectorAll("a");
console.clear();
console.log(as);
var str="";
for(i in as){
var t=as[i].innerText;
var h=as[i].href;
console.log(t);
console.log(h);
console.log("");
str+=t+"<br/>"+h+"<br/><br/>";
}
var tab=document.createElement("div");
tab.style.cssText = "position:absolute;background-color:rgba(255,255,255,0.6);width:300px;height:300px;overflow:auto;top:0px;left:0px;";
tab.innerHTML=str;
document.body.appendChild(tab);
3. 各种脚本写好后,打开chrome://extensions/,右上角将开发者模式选项打开后,加载已解压的拓展程序,选择项目文件夹,拓展就已经安装到浏览器中可供运行。
?
|