【Chrome扩展开发】去贴吧广告

1. 本地创建插件目录和文件

1.1 创建目录

D:\CodeTest\BrowserExtension\RemoveAd

1.2 创建文件

“D:\CodeTest\BrowserExtension\RemoveAd\manifest.json”

{
    "manifest_version": 2,
    "name": "自定义去广告",
    "description": "学习Chrome扩展开发,去广告实践!",
    "version": "0.0.1",

    // 需要直接注入页面的JS
    "content_scripts": 
    [
        {
            "matches": ["https://tieba.baidu.com/*"],
            // 多个JS按顺序注入
            "js": ["tieba-remove-ad.js"],
            // 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
            "run_at": "document_idle"
        }
    ]
}

“D:\CodeTest\BrowserExtension\RemoveAd\tieba-remove-ad.js”

//判断对象是否存在指定css样式的class
function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

//给对象添加css样式,或者获取对象的css样式
function css(obj, attr, value) {
    switch (arguments.length) {
        case 2:
            //读取属性值
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];
            break;
        case 3:
            //设置属性
            obj.style[attr] = value;
            break;
        default:
            return "";
    }
}

//帖子容器ul
var ulItem = document.getElementById('thread_list');

//帖子列表li
var liArr = ulItem.children;

//是否为置顶帖子和普通帖子
var flag = false;

for(var i = 0; i < liArr.length; i++){
    flag = hasClass(liArr[i], 'thread_top_list_folder'); //置顶帖子
    flag = flag || hasClass(liArr[i], 'j_thread_list'); //普通帖子

    if(flag){
        continue;
    }else{  // 其他视为广告,隐藏之
        css(liArr[i], 'display', 'none');
    }
}

2. 将插件载入Chrome

打开Chrome,地址栏输入

chrome://extensions/

右上角点开开发者模式,会弹出“加载已解压的扩展程序”、“打包扩展程序”等按钮。

点击“加载已解压的扩展程序”按钮,选择“RemoveAd”文件夹。

下方会出现一个自己开发的插件卡片。

卡片包含插件的名称、描述信息。
还生成一个唯一的ID。
最下面一排是详细信息文字按钮、删除文字按钮、刷新图标按钮以及开启与关闭图标按钮。

修改了js,可以点击刷新按钮生效。

开启与关闭图标按钮,对比使用插件前后的效果。


文章作者: 叶遮沉阳
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 叶遮沉阳 !
  目录