很多代码编辑器都可用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,可以在非官方中文文档找到
反正最终实现的效果就是这样啦~
项目地址在这里