chrome空间自动点赞插件。浏览器插件简单例子。

最新推荐文章于 2024-10-08 21:03:03 发布

原创最新推荐文章于 2024-10-08 21:03:03 发布 · 2.5k 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何创建并打包Chrome浏览器插件，包括manifest.json配置、背景脚本(bg.js)的功能实现、弹窗(popup.html)设计以及图标(icon.png)的使用。通过实例展示了插件如何监听页面加载完成并执行特定操作，如对特定网站的元素进行自动化操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码很简单：

chrome的插件主要是放在一个文件夹里面然后在chrome浏览器里面打包就ok了。

这样：

开始看代码：

主控代码

manifest.json

{
  "name":"a",
  "version": "1.0",
  "manifest_version": 2,
  "description": "1",
 "permissions":[
 "tabs",
  "https://*/*",
  "http://*/*"
  ],
  "browser_action":{
  "default_icon":"icon.png",
  "default_popup":"popup.html"
  },
  "background": {
  "scripts": ["bg.js"],   
  "persistent": false
  }
}

bg.js

console.log("background")
chrome.tabs.onUpdated.addListener(function(tabId , info) {
  if (info.status == "complete") {
    chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
      var url = tabs[0].url;
      console.log(url)
     //if(url=="https://www.baidu.com/"){  
      //  chrome.tabs.executeScript(null,{code:'alert("Hello World!")'});
     // }http://user.qzone.qq.com/     removeEventListener
	 //window.addEventListener("scroll", function(){console.log(8)});
	// window.onscroll=function(){console.log(123)}
	 
	 if(url.match('user.qzone.qq.com')){
		 
		 var  strjs='var items=document.getElementsByClassName("item");'+
		 'for(var i=0;i<items.length;i++){;var s=items[i].innerHTML;!s.match("赞")||s.match("取消赞")||items[i].click();}';
		 
		// chrome.tabs.executeScript(null,{code:' window.onscroll=function(){setTimeout( '+strjs+', 3000) }'});
		//ok chrome.tabs.executeScript(null,{code:'window.onscroll=function(){ console.log(8888);var items=document.getElementsByClassName("item"); console.log(items)}'});
		    
chrome.tabs.executeScript(null,{code:'window.onscroll=function(){ console.log(8888);var items=document.getElementsByClassName("item"); for(var i=0;i<items.length;i++){;var s=items[i].innerHTML;!s.match("赞")||s.match("取消赞")||items[i].click();} }'});
		 

			//var items=document.getElementsByClassName("item")
			//	for(var i=0;i<items.length;i++){
			//	var s=items[i].innerHTML
			//	!s.match('赞')||s.match('取消赞')||items[i].click();
			// }
//chrome.tabs.executeScript(null,{code:});	 
		 
	 }
    });
  }
});

popup.js

document.getElementById("p1").innerHTML="空间点赞"

popup.html

<!doctype html>
<html>
  <head>
    <title>空间点赞</title>
    <style>
      body {
        min-width: 100px;
        overflow-x: hidden;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 75px;
        height: 75px;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
     -->
  </head>
  <body>
  <p id="p1">空间点赞</p>
  <script src="popup.js"></script>
  </body>
</html>

icon.png 就是一个普通的图片

打包后的效果是：