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

549 阅读1分钟

很多代码编辑器都可用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_scriptslaunch.js进行通信:

chrome.tabs.query
chrome.tabs.sendMessage
chrome.runtime.onMessage.addListener

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

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

实现效果

操作界面

项目地址在这里