谷歌浏览器插件-清除CSDN广告

Posted 2021-12-17 kawhileonardfans

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷歌浏览器插件-清除CSDN广告相关的知识，希望对你有一定的参考价值。

记录一下自己第一次玩的一个谷歌插件，是一个清除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）

以上是关于谷歌浏览器插件-清除CSDN广告的主要内容，如果未能解决你的问题，请参考以下文章

csdn过滤广告谷歌浏览器插件

CSDN博客去广告-谷歌插件

谷歌浏览器插件-右键清除历史记录统计选中字符串

怎样在谷歌浏览器上安装拦截广告的插件呢？

如何屏蔽CSDN上面的广告