一个炫酷文字输入的chrome扩展插件

很多代码编辑器都可用activate-power-mode这个插件，它可以实现下面的效果:

由于之前没有写过chrome扩展插件，便想写基于activate-power-mode写一个chrome扩展插件，能够在浏览器的文字输入都能实现这样的特效，顺便也当作对chrome扩展的一次小小的学习了解， 好在360平台有个很完整的开发文档，基本都有的东西都讲了，然后在github上有个提供activate-power-mode支持的javascript项目github.com/disjukr/act…，于是事情就变得简单起来了。

mainfest.json:


{
  "name": "chrome-power-mode",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "power mode for any website input",
  "icons": {
    "16": "logo.jpeg",
    "48": "logo.jpeg",
    "128": "logo.jpeg"
  },
  "author": "aonosora",
  "browser_action": {
    "default_icon": "logo.jpeg",
    "default_title": "chrome-power-mode",
    "default_popup": "setting.html"
  },
  "permissions": ["*://*/*", "tabs"],
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["activate-power-mode.js", "launch.js"]
    }
  ]
}
复制代码

启动activate-power-mode的方式如下:

POWERMODE.colorful = true; // make power mode colorful
POWERMODE.shake = false; // turn off shake
document.body.addEventListener('input', POWERMODE);
复制代码

launch.js负责对POWERMODE这个变量进行操作，进而达到控制特效的作用，通过setting.html提供一个操作(控制效果开闭和振动开闭)的界面，通过下面的三个API与content_scripts的launch.js进行通信:

chrome.tabs.query
chrome.tabs.sendMessage
chrome.runtime.onMessage.addListener
复制代码

关于这些API，可以在非官方中文文档找到

反正最终实现的效果就是这样啦~

项目地址在这里