参考资料

  1. 我的第一个Chrome扩展
  2. Chrome 扩展开发文档

二维码生成器

  • 获取当前标签的URL,通过jquery.qrcode.js绘制二维码
  • 右键选中URL生成二维码

chrome-ed

参考资料

Code

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 获取当前标签的URL */
chrome.tabs.query({
  active: true,
  lastFocusedWindow: true
}, function (tabs) {
  let url = tabs[0].url
  drawCode(url)
})

/* 绘制二维码 */
function drawCode (url) {
  $('.reload input').val(url)
  $('#qrcode').html('').qrcode({width: 200, height: 200, text: url})
}
$('button').on('click',function () {
  drawCode($('input').val())
})

右键菜单设置

1
2
3
4
5
6
7
8
9
10
11
12
13
chrome.contextMenus.create({
  'type':'normal',
  'title':'生成二维码',
  'onclick': showCode
});

function showCode () {
  /**/
}
/* 离开popup改变icon */
chrome.windows.onFocusChanged.addListener(function(window) {
  chrome.browserAction.setIcon({path: '/images/qrcode.png'})
});

manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "manifest_version": 2,
  "name": "二维码生成器",
  "version": "1.0",
  "description": "利用二维码库制作的二维码生成器",
  "icons": {
    "128": "images/qrcode.png"
  },
  "browser_action": {
    "default_icon": {
      "19": "images/qrcode.png",
      "38": "images/qrcode-hover.png"
    },
    "default_title": "生成二维码",
    "default_popup": "index.html"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "contextMenus"
  ],
  "background": {
    "scripts": [
      "js/background.js"
    ]
  }
}

小说txt下载和本地txt阅读

  • 小说网站目录页进行txt下载(目前仅匹配笔趣阁)
  • 本地txt阅读,目录,自动翻页
  • 模仿UC阅读模式,实现小说模式

效果图
效果图

book-down-read

使用vue开发

可以把vue项目npm run build 以后,在manifest.json修改default_popup的入口为打包后的页面

国内安装 chrome扩展

  • 1
  • 2
    下载完成后打开扩展程序chrome://extensions/勾选开发模式,将下载的扩展拖入安装