守得云开见月明 首页 关于

Chrome插件开发之ImageKiller

2018-04-08 / Juexe / 懒得分类

一、开发准备

1. 工具和环境

开发 Chrome 插件需要

  • Chrome内核的浏览器
  • 代码编辑器

不需要额外的IDE和开发环境。

二、开始开发

任意位置新建一个目录ImageKiller

目录下新建文件 manifest.jsonbackground.js

下面以 实现隐藏当前页面所有图片 解说下这两个文件的最简写法。

1. 配置清单 manifest.json

{
  // *清单版本,固定值
  "manifest_version": 2,
  // *插件名称
  "name": "Image Killer",
  // *插件版本
  "version": "1.0.0",
  // 描述和图标
  "description": "隐藏当前页面所有图片。",
  "icons":{},
  // 权限申请
  "permissions": [
    "activeTab" // 在当前激活的标签上运行插件
  ],
  // 一直常驻的后台JS或Page
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  // 浏览器右上角图标
  "browser_action": {
    "default_title": "隐藏当前页面所有图片。-by Juexe"
  }
}

2. 常驻脚本 background.js

在页面内执行 js 命令的两种方法:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    // 方法1:只能执行一句js命令
    code: 'document.body.style.backgroundColor="red"',
    // 方法2:执行一个js文件
    file: 'hideImg.js'
  });
});

使用方法2来在当前页面运行脚本,为此在同目录下新建一个hideImg.js

内容如下

var imgs = document.body.getElementsByTagName("img");
for(i in imgs) {
    imgs[i].src = "//";
    //imgs[i].width = 0;
}

执行该 js 脚本后即可隐藏掉当前页面的所有图片,

可以看到命令都是使用 Javascript 原生语句,

其实可以在配置文件内使用 content-script 来植入 JQuery

这里功能比较简单,就不需要了。

三、更多参考资料

Chrome插件开发

 

(完)

添加评论

Powered by Typecho and Theme by Juexe © 2018 Juexe