记录一下自己第一次玩的一个谷歌插件，是一个清除CSDN广告的，其实就是通过jquery定位元素，做隐藏或者删除。
其它案例参考地址:https://blog.csdn.net/shellching/article/details/78224230
360谷歌插件文档:http://open.chrome.360.cn/extension_dev/overview.html
该案例码云git地址:https://gitee.com/lgqxjxcc/gpe/tree/master/google-xjxcc-util-delCsdnAd
开始
文件结构
---- google-xjxcc-util-delCsdnAd（插件文件夹名称）
---- ---- img
---- ---- ---- icon.png (插件图标，随便放一个就可以了)
---- ---- js
---- ---- ---- delAd
---- ---- ---- ---- CSDN.js (清除CSDN广告的JS)
---- ---- ---- jquery-1.8.3.js
---- ---- ---- popup.js (点击浏览器右上角插件图标弹出的页面对应的JS)
---- ---- manifest.json (插件主配置)
---- ---- popup.html (点击浏览器右上角插件图标弹出的页面)
1、首先上主配置文件---manifest.json
{
// 清单文件的版本，这个必须写，而且必须是2
"manifest_version": 2,
// 插件的名称
"name": "洗脚溪串串常用工具-清除CSDN广告",
// 插件的版本
"version": "1.0.0",
// 插件描述
"description": "里面包含了清除CSDN广告功能",
// 图标，一般偷懒全部用一个尺寸的也没问题
"icons":
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
// 浏览器右上角图标设置，browser_action、page_action、app必须三选一
"browser_action":
{
"default_icon": "img/icon.png",
// 图标悬停时的标题，可选
"default_title": "清除CSDN广告",
// 这个就是你点击浏览器右上角插件图标弹出的页面
"default_popup": "popup.html"
},
// 需要直接注入页面的JS
"content_scripts":
[
//去除CSDN的广告
{
"matches": ["https://*.csdn.net/*"],//匹配CSDN
"js": ["js/jquery-1.8.3.js", "js/delAd/CSDN.js"],
// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
"run_at": "document_end"
}
],
// 插件主页，这个很重要，不要浪费了这个免费广告位
"homepage_url": "https://blog.csdn.net/liguoqingxjxcc",
// 默认语言
"default_locale": "zh_CN"
}
2、点击插件展示的页面---popup.html
<!DOCTYPE html>
<html>
<head>
<title>洗脚溪串串常用工具</title>
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
font-family: ‘Microsoft Yahei‘;
width: 300px;
min-height: 100px;
}
a {margin-right: 10px;}
</style>
<!--
注意:
1、不支持内联JavaScript的执行
不能再标签中用onclick属性等，如果想用onclick功能，自己在js文件里面用$("").click();
2、
-->
</head>
<body>
<div align="center">
<h3>
<a href="javascript:void(0)" class="openUrl" src="https://blog.csdn.net/liguoqingxjxcc">洗脚溪串串</a>
</h3>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</body>
</html>
3、点击插件展示的页面对应的JS---popup.js
$(function() {
});
//点击常用地址(这段代码不要放在$(function() {}里面，不然执行不了)
$(".openUrl").click(function (){
var url = $(this).attr("src");
var isNewWindow = "";//测试案例、这里默认在新标签中打开网页
//在新窗口中打开网页
if(isNewWindow == "checked"){
chrome.windows.create({url: url});
//在新标签中打开网页
}else{
chrome.tabs.create({url: url});
}
});
4、去除CSDN广告的js文件---CSDN.js
$(document).ready(function (){
console.log("我是去除CSDN广告的");
var currUrl = window.location.href;
//CSDN博客
if(currUrl.indexOf("blog.csdn.net") > 0){
$("iframe").each(function (){
var iframeSrc = $(this).attr("src");
if(iframeSrc && iframeSrc.indexOf("pos.baidu.com") > 0){
$(this).remove();
}
});
//CSDN下载
}else if(currUrl.indexOf("download.csdn.net") > 0){
$(".J_adv").remove();
//CSDN论坛
}else if(currUrl.indexOf("bbs.csdn.net") > 0){
$(".ad_top").remove();
$(".J_adv").remove();
}
});
除了上面四个文件，还有一个图片和Jquery的文件。这两个文件随便找一个就行了。
使用插件:在谷歌浏览器-更多工具-扩展程序-打开开发者模式-加载已解压的扩展程序，选择你的文件夹（google-xjxcc-util-delCsdnAd）
原文地址：https://www.cnblogs.com/kawhileonardfans/p/10966182.html