https://github.com/deepred5/chrome-extensions-guides
chrome插件开发小教程
https://github.com/deepred5/chrome-extensions-guides
Last synced: about 1 year ago
JSON representation
chrome插件开发小教程
- Host: GitHub
- URL: https://github.com/deepred5/chrome-extensions-guides
- Owner: deepred5
- Created: 2016-10-07T08:24:10.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-09T04:08:54.000Z (over 9 years ago)
- Last Synced: 2025-03-29T18:11:09.692Z (over 1 year ago)
- Language: JavaScript
- Size: 30.3 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# chrome插件小教程
**[在线教学视频](http://www.bilibili.com/video/av6584244/)**
### 新建一个文件夹,文件下建立images文件夹和js文件夹
images文件夹用来放插件图标
注意:图标要是png格式
### 1.建立manifest.json文件
```javascript
{
"manifest_version": 2,
"name": "hentai",
"version": "1.0",
"description": "hentai插件",
"icons": {
"16": "images/hentai.png",
"48": "images/hentai.png",
"128": "images/hentai.png"
},
"browser_action": {
"default_icon": {
"19": "images/hentai.png",
"38": "images/hentai.png"
},
"default_title": "hentai",
"default_popup": "popup.html"
}
}
```
### 2.新建一个popup.html
```html
hentai
body {
width: 250px;
text-align: center;
}
做MAD的都是SB
自古多情留不住，总是套路得人心
```
### 3.添加右键显示功能
* 更改manifest.json文件，添加：
```javascript
"background": {
"scripts": [
"js/background.js"
]
},
"permissions": ["tabs", "contextMenus"]
```
* 在js文件夹新建background.js
```javascript
chrome.contextMenus.create({
type: 'normal',
title: '隐藏网页',
id: 'a',
onclick: hide
});
function hide() {}
```
### 4.实现隐藏功能
* 完成hide函数
```javascript
function hide() {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, { info: "hide" });
});
}
```
* 更改manifest.json文件，添加：
```javascript
"content_scripts": [{
"matches": ["http://*/", "https://*/", "http://*/*", "https://*/*"],
"js": ["js/hide.js"]
}]
```
* 在js文件夹新建hide.js
```javascript
var hentaiFlag = true;
var hentaiTitle = '好好学习';
var oriTitle = document.title;
chrome.runtime.onMessage.addListener(
function(request) {
if (request.info == "hide") {
if (hentaiFlag) {
document.body.style.opacity = 0;
document.title = hentaiTitle;
} else {
document.body.style.opacity = 1;
document.title = oriTitle;
}
hentaiFlag = !hentaiFlag;
}
}
);
```
### 5.实现点击图标也可以隐藏网页
* 在js文件夹新建index.js,并在popup页面引入
```javascript
chrome.runtime.sendMessage({info: "hide"});
```
* 修改background.js
```javascript
chrome.runtime.onMessage.addListener(
function(request) {
if (request.info == "hide") {
hide();
}
}
);
```