├── background.md ├── en.md ├── zh.md ├── ekill.md └── readme.md /background.md: -------------------------------------------------------------------------------- 1 | ## background.js 2 | 3 | 也就做了一件事 4 | 5 | ``` js 6 | chrome.browserAction.onClicked.addListener(function(tab) { 7 | chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 8 | chrome.tabs.sendMessage(tabs[0].id, {}); // 什么信息都没有, 但是类似发送了个信号 9 | }); 10 | }); 11 | ``` 12 | 13 | - `chrome.browserAction.onClicked.addListener` 单击浏览器按钮时作出反应。 14 | 15 | > [非官方](https://crxdoc-zh.appspot.com/extensions/browserAction#event-onClicked) 16 | 17 | - `chrome.tabs.query` 使用 chrome.tabs API 与浏览器标签页交互, 查询 18 | - `{active: true, currentWindow: true}` 标签页组, 给到第二个函数中的`tabs`参数 19 | 20 | > [非官方](https://crxdoc-zh.appspot.com/extensions/tabs#method-query) 21 | 22 | - `chrome.tabs.sendMessage` 向指定标签页中的内容脚本发送一个消息 23 | 24 | > [非官方](https://crxdoc-zh.appspot.com/extensions/tabs#method-sendMessage) -------------------------------------------------------------------------------- /en.md: -------------------------------------------------------------------------------- 1 | ekill 2 | ============= 3 | 4 | It's like [**xkill**](https://en.wikipedia.org/wiki/Xkill), but for annoying web pages instead. 5 | 6 | Chrome and Firefox plugin for quickly getting rid of elements on a web page. 7 | 8 | ## Installation 9 | 10 | - [Chrome web store](https://chrome.google.com/webstore/detail/ekill/lcgdpfaiipaelnpepigdafiogebaeedg?hl=en) 11 | - [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/ekill/) 12 | 13 | ![Example](https://raw.githubusercontent.com/rhardih/ekill/master/example.gif) 14 | 15 | ## Keyboard shortcut 16 | 17 | By default **ekill** is toggled with *ctrl+k*, but this can be modified at will. 18 | 19 | Go to [chrome://extensions/shortcuts](chrome://extensions/shortcuts), find the item labeled "ekill" and set it to whatever is most convenient. 20 | 21 | # License 22 | 23 | MIT: http://rhardih.mit-license.org 24 | 25 | # Changelog 26 | 27 | **1.4** 28 | 29 | - Adds support for Firefox 30 | 31 | **1.1 - 1.3** 32 | 33 | - Introduces ability to toggle on/off, as well as dismiss with Esc key 34 | - Permissions narrowed to *activeTab* only 35 | - Targets anything with *role=button* 36 | 37 | **1.0** 38 | 39 | - Initial version 40 | -------------------------------------------------------------------------------- /zh.md: -------------------------------------------------------------------------------- 1 | 2 | ### 目录 3 | 4 | 5 | 6 | 7 | 8 | - [ekill](#ekill) 9 | - [安装](#%E5%AE%89%E8%A3%85) 10 | - [键盘快捷键](#%E9%94%AE%E7%9B%98%E5%BF%AB%E6%8D%B7%E9%94%AE) 11 | - [执照](#%E6%89%A7%E7%85%A7) 12 | - [更新日志](#%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97) 13 | 14 | 15 | 16 | # ekill 17 | 18 | 就像是[**xkill**](https://en.wikipedia.org/wiki/Xkill),但对于烦人的网页而言. 19 | 20 | Chrome 和 Firefox 插件可快速删除网页上的元素. 21 | 22 | ## 安装 23 | 24 | - [Chrome 网上商店](https://chrome.google.com/webstore/detail/ekill/lcgdpfaiipaelnpepigdafiogebaeedg?hl=en) 25 | - [Firefox 附加组件](https://addons.mozilla.org/firefox/addon/ekill/) 26 | 27 | ![Example](https://raw.githubusercontent.com/rhardih/ekill/master/example.gif) 28 | 29 | ## 键盘快捷键 30 | 31 | 默认**ekill**被切换了*CTRL + K*,但这可以随意修改. 32 | 33 | 去[chrome://extensions/shortcuts](chrome://extensions/shortcuts),找到标有"ekill"的项目, 并将其设置为最方便的项目. 34 | 35 | # 执照 36 | 37 | MIT: 38 | 39 | # 更新日志 40 | 41 | **1.4** 42 | 43 | - 添加对 Firefox 的支持 44 | 45 | **1.1 - 1.3** 46 | 47 | - 介绍切换开/关的功能,以及使用 Esc 键关闭 48 | - 权限缩小到只要*activeTab* 49 | - 瞄准任何东西*role=button* 50 | 51 | **1.0** 52 | 53 | - 初始版本 54 | -------------------------------------------------------------------------------- /ekill.md: -------------------------------------------------------------------------------- 1 | ## ekill.{js|css} 2 | 3 | 内容脚本, 插入到网页 4 | 5 | ### js 6 | 7 | 这里的主逻辑要从`c.runtime.onMessage.addListener(msgHandler);` 看起 8 | 9 | 1. 获得[background.js](./background.md)后台传来的信号, 选择性运行函数 10 | 11 | 2. 选择关还是开, 先开`enable`才能关`disable` 12 | 13 | 3. `enable` 14 | - 3.0 active true 15 | - 3.1 替换所有`a``button``[role=button]`元素的点击监听 16 | - 好了, 下面是鼠标箭头选择需要除掉的元素 17 | - 3.2 添加顶级大 `ekill-cursor`class 前缀 18 | - 3.3 移动 **到** 元素的监听函数: 主要是元素class的add 19 | - 3.4 移动 **出** 元素的监听函数: 主要是元素class的remove 20 | - 3.5 点击触发,除掉这个元素 :注意阻止默认行为 21 | - 3.6 按键`Esc`, 触发`disable` 22 | 23 | 4. `disable` : 主要是把`enable`影响的,复原 24 | - 4.0 active false 25 | - 4.1 恢复所有`a``button``[role=button]`元素的点击监听 26 | - 好了, 下面是鼠标箭头选择的影响 27 | - 4.2 去掉顶级大 `ekill-cursor`class 前缀 28 | - 4.3 清除一些独立的hover操作的`ekill`class 29 | - 4.4 去掉移动 **到** 元素的监听函数 30 | - 4.5 去掉移动 **出** 元素的监听函数 31 | - 4.6 去掉选择元素的点击触发 32 | - 4.7 去掉按键监听`Esc` 33 | 34 | ``` js 35 | (function(c, d){ // (chrome, document); 一个是 chrome的扩展api, 一个是document 36 | let active = false; 37 | let clickable = [ 38 | d.getElementsByTagName("a"), 39 | d.getElementsByTagName("button"), 40 | d.querySelectorAll('[role=button]'), 41 | ]; 42 | 43 | let overHandler = function(e) { 44 | e.target.classList.add("ekill"); 45 | e.stopPropagation(); 46 | }; 47 | let outHandler = function(e) { 48 | e.target.classList.remove("ekill"); 49 | e.stopPropagation(); 50 | }; 51 | let clickHandler = function(e) { 52 | disable(); 53 | e.target.remove(); 54 | e.preventDefault(); 55 | e.stopPropagation(); 56 | }; 57 | 58 | let keyHandler = function(e) { 59 | if (e.key === "Escape") { 60 | disable(); 61 | } 62 | } 63 | 64 | let enable = function() { 65 | active = true; // 3.0 66 | 67 | // 每个 能点的 元素 68 | clickable.forEach(function(c) { // 3.1 69 | for (var i = 0; i < c.length; i++) { 70 | c[i].onclickBackup = c[i].onclick; 71 | c[i].addEventListener("click", clickHandler); 72 | } 73 | }); 74 | 75 | d.documentElement.classList.add("ekill-cursor"); // 3.2 76 | d.addEventListener("mouseover", overHandler); // 3.3 77 | d.addEventListener("mouseout", outHandler); // 3.4 78 | d.addEventListener("click", clickHandler); // 3.5 79 | d.addEventListener("keydown", keyHandler, true); // 3.6 80 | }; 81 | let disable = function() { 82 | active = false; // 4.0 83 | 84 | clickable.forEach(function(c) { // 4.1 85 | for (var i = 0; i < c.length; i++) { 86 | c[i].removeEventListener("click", clickHandler); 87 | c[i].addEventListener("click", c[i].onclickBackup); 88 | delete c[i].onclickBackup; 89 | } 90 | }); 91 | 92 | d.documentElement.classList.remove("ekill-cursor"); // 4.2 93 | 94 | // 清除 一些 独立的 hover 操作的 class 95 | let orphan = d.querySelector('.ekill'); // 4.3 96 | if (orphan !== null) { 97 | orphan.classList.remove("ekill"); 98 | } 99 | 100 | d.removeEventListener("mouseover", overHandler); // 4.4 101 | d.removeEventListener("mouseout", outHandler); // 4.5 102 | d.removeEventListener("click", clickHandler); // 4.6 103 | d.removeEventListener("keydown", keyHandler, true); // 4.7 104 | }; 105 | 106 | 107 | let msgHandler = function(message, callback) { // 2. 108 | if (active) { // 是否已启动 109 | disable(); 110 | } else { 111 | enable(); 112 | } 113 | }; 114 | 115 | // c == chrome 116 | c.runtime.onMessage.addListener(msgHandler); // 1. 117 | })(chrome, document); 118 | ``` 119 | 120 | - `c.runtime.onMessage.addListener` 获得[background.js](./background.md)后台传来的信号, 选择性运行函数 121 | 122 | > [非官方](https://crxdoc-zh.appspot.com/extensions/runtime#event-onMessage) 123 | 124 | 125 | 126 | ### css 127 | 128 | 看了, 上面就知道, `enable`会添加一个大`ekill-cursor`class前缀 129 | 130 | #### enable后,鼠标在可点击元素上的变化 131 | 132 | ``` css 133 | .ekill-cursor, 134 | .ekill-cursor a, 135 | .ekill-cursor input, 136 | .ekill-cursor select, 137 | .ekill-cursor button, 138 | .ekill-cursor div[role=button] { 139 | cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cpath d='M14 14.7c-.1.2-.3.3-.5.3h-.2l-5.8-2.4L1.7 15c-.3.1-.5 0-.6-.3a.5.5 0 0 1 .2-.7l4.9-2-4.9-2a.5.5 0 1 1 .4-1l5.8 2.5L13.3 9a.5.5 0 1 1 .4.9l-4.9 2 4.8 2a.5.5 0 0 1 .3.7zM12 4.2v.5c0 .2 0 .4-.2.6L10 7v1.2c0 .2-.1.4-.3.4l-2.2.9-2.2-.9a.5.5 0 0 1-.3-.4V7L3.2 5.3a1 1 0 0 1-.2-.6v-.5C3.2 2 4.9.2 7.1 0H8c2.2.2 4 2 4.1 4.2zM6 4a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm1 3a.5.5 0 0 0-1 0v.5a.5.5 0 0 0 1 0V7zm2 0a.5.5 0 0 0-1 0v.5a.5.5 0 0 0 1 0V7zm2-3a1 1 0 1 0-2 0 1 1 0 0 0 2 0z'/%3E%3C/svg%3E"), crosshair !important; 140 | } 141 | 142 | ``` 143 | 144 | #### enable后, 鼠标到达所选元素后,样式变化 145 | ```css 146 | .ekill { 147 | filter: opacity(0.2); 148 | box-shadow: inset 0px 0px 25px rgba(255,0,0,.5); 149 | } 150 | ``` 151 | 152 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # rhardih/ekill [![explain]][source] [![translate-svg]][translate-list] 2 | 3 | 4 | 5 | [explain]: http://llever.com/explain.svg 6 | [source]: https://github.com/chinanf-boy/Source-Explain 7 | [translate-svg]: http://llever.com/translate.svg 8 | [translate-list]: https://github.com/chinanf-boy/chinese-translate-list 9 | [size-img]: https://packagephobia.now.sh/badge?p=Name 10 | [size]: https://packagephobia.now.sh/result?p=Name 11 | 12 | 「 Chrome 和 Firefox 插件可快速删除网页上的元素 」 13 | 14 | --- 15 | 16 | ## explain ✅ 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | | 版本 | 与日期 | 最新更新 | 更多 | 25 | | -------- | ------------- | ---------- | ------------------ | 26 | | [commit] | ⏰ 2018-10-07 | ![version] | [源码解释][source] | 27 | 28 | [commit]: https://github.com/rhardih/ekill/tree/7b83eae9c919de2f9b69fac95bc6e51b26de0490 29 | [version]: https://img.shields.io/npm/v/ekill.svg 30 | 31 | 32 | 33 | ### 中文 34 | 35 | - [zh readme.md](./zh.md) 36 | 37 | ## 生活 38 | 39 | [help me live , live need money 💰](https://github.com/chinanf-boy/live-need-money) 40 | 41 | --- 42 | 43 | > 一个 Chrome 扩展其实就是一个配置文件 `manifest.json` 和一系列 HTML、CSS、JS、图片文件的集合 44 | 45 | ## manifest.json 46 | 47 | > 因为第一次, 扩展explain, 详细点 48 | 49 | ``` json 50 | { 51 | "name": "ekill", 52 | "version": "1.4", 53 | "description": "Remove unwanted elements from a page quickly!", 54 | "manifest_version": 2, 55 | "browser_action": { 56 | "default_icon": { // 默认显示在工具栏的图标 57 | "16": "skull-and-bones-16.png", 58 | "48": "skull-and-bones-48.png", 59 | "128": "skull-and-bones-128.png" 60 | } 61 | // "default_popup": "popup.html" 62 | // 加多个提示, 这个是 点击 图标,所显示的页面 63 | }, 64 | "permissions": [ // 请求权限 65 | "activeTab" // 当前标签页 66 | ], 67 | "background": { // 后台网页 68 | "scripts": ["background.js"], 69 | "persistent": false // 不一直存在: 推荐 70 | }, 71 | "content_scripts": [ // 内容脚本 72 | { 73 | "matches": [""], 74 | "js": ["ekill.js"], 75 | "css": ["ekill.css"] 76 | } 77 | ], 78 | "icons": { // 安装过程中和Chrome网上应用店中使用 79 | "16": "skull-and-bones-16.png", 80 | "48": "skull-and-bones-48.png", 81 | "128": "skull-and-bones-128.png" 82 | }, 83 | "commands": { // 命令挂钩 84 | "_execute_browser_action": { 85 | "suggested_key": { 86 | "default": "Ctrl+K", 87 | "mac": "MacCtrl+K" 88 | } 89 | } 90 | } 91 | } 92 | ``` 93 | 94 | - [更多manifest.json信息:官方](https://developer.chrome.com/extensions/manifest) 95 | 96 | > 还有个 [非官方中文网站](https://crxdoc-zh.appspot.com/apps/manifest) 97 | 98 | - [ ] [background](#background) 99 | - [ ]] [content_scripts](#content_scripts) 100 | - [x] [commands](#commands) 101 | 102 | ### background 103 | 104 | 扩展程序通常需要有一个长时间运行的脚本来管理一些任务或状态，而后台网页就是为这一目的而设立。 105 | 106 | ``` json 107 | "background": { // 后台网页 108 | "scripts": ["background.js"], 109 | "persistent": false 110 | } 111 | ``` 112 | 113 | - [x] [background.js](./background.md) 信号发送到内容脚本 114 | 115 | - [官方](https://developer.chrome.com/extensions/background_pages) || [非官方:中文](https://crxdoc-zh.appspot.com/extensions/background_pages) 116 | 117 | ### content_scripts 118 | 119 | 内容脚本是在网页的上下文中运行的 JavaScript 文件 120 | 121 | ``` json 122 | "content_scripts": [ // 内容脚本 123 | { 124 | "matches": [""], // 在所有url中文插入 下面 js + css 125 | "js": ["ekill.js"], 126 | "css": ["ekill.css"] 127 | } 128 | ] 129 | ``` 130 | 131 | - [x] [ekill.js](./ekill.md#js) 132 | - [x] [ekill.css](./ekill.md#css) 133 | 134 | - [官方](https://developer.chrome.com/extensions/content_scripts) || [非官方:中文](https://crxdoc-zh.appspot.com/extensions/content_scripts) 135 | 136 | ### commands 137 | 138 | '_execute_browser_action'和'_execute_page_action'命令保留用于打开扩展程序弹出窗口的操作 139 | 140 | ``` json 141 | "commands": { // 命令挂钩 142 | "_execute_browser_action": { 143 | "suggested_key": { 144 | "default": "Ctrl+K", 145 | "mac": "MacCtrl+K" 146 | } 147 | } 148 | } 149 | ``` 150 | 151 | - [官方](https://developer.chrome.com/extensions/commands) 152 | 153 | ### 其他 154 | 155 | #### package.sh 156 | 157 | 作者的打包sh脚本, 不长也放出来 158 | 159 | ``` sh 160 | #!/usr/bin/env bash 161 | 162 | mkdir tmp 163 | git archive HEAD --format=zip > tmp/ekill.zip # 运用git,从git命名树创建文件存档, 打包git存储库 164 | 165 | pushd tmp # pushd：切换到作为参数的目录，并把原目录和当前目录压入到一个虚拟的堆栈中 166 | 167 | zip -d ekill.zip .gitignore # 删除 压缩多余文件 168 | zip -d ekill.zip README.md 169 | zip -d ekill.zip package.sh 170 | zip -d ekill.zip example.gif 171 | 172 | popd # popd : 弹出pushd的堆 173 | 174 | if [ ! -f ekill.zip ]; # 看看有没有旧的, 删除 175 | then 176 | rm ekill.zip 177 | fi 178 | 179 | mv tmp/ekill.zip . # 移到 根目录 180 | rm -rf tmp # 删掉缓存目录 181 | 182 | zipinfo ekill.zip # zip 信息 183 | ``` --------------------------------------------------------------------------------