background
One night when I was browsing the Nuggets, I accidentally discovered the creative game of Bombing the Nuggets. I was shocked. I thought that I used to want to make a special effect that separates the elements of the page, but I didn't practice it because I was busy with work (lan), and now I stay at home because of the epidemic. Office, more time than beforedare to fish, why not take this opportunity to make it happen?
Consult documentation
Then we roll up our sleeves and do it. The general idea is to use the chrome plug-in to achieve the effect of page elements falling off, so first check the Google plug-in development document (need a ladder), and gradually clarify a few points
First is the manifest file
Every plugin needs to have a manifest.json file that provides some important information about the plugin
Among the required fields:
| field name | explain |
|---|---|
| manifest_version | Describe the version of the manifest file |
| name | plugin name |
| version | version of the plugin |
Recommended fields:
| field name | explain |
|---|---|
| description | Introduction to plugins |
| icons | Plugin icon |
| action | Use the chrome.actionAPI to control the behavior of the plugin icon in the browser toolbar |
Other fields that seem to be more powerful:
| field name | explain |
|---|---|
| background | where service_worker is registered |
| commands | Add shortcut keys to plugins |
| content_scripts | A file to run in the current web environment |
| permissions | Declare plugin permissions required at runtime |
The second is the ability provided by the plug-in
Before writing a plug-in, we have to know what cool functions the plug-in can provide, right? There are two nice summaries in the development document:
Then adjust it according to the function you want to achieve
write logic
We want to click the plug-in icon in the toolbar, and the page elements start to fall down, so we need to check the API documentation to see how to monitor the click event of the plug-in icon and manipulate the page content
Quickly, my eyes are on these two APIs:
chrome.action.onClickedClick the plugin iconchrome.scriptingExecute scripts in different pages
Now everything is ready, only the code is missing, let's organize the manifest.jsonfiles , and summarize the information of the plugin:
// 这里只列出运行逻辑相关的字段哈
"background": { // 还记得之前在表格里介绍的 background 字段吗 嘿嘿
"service_worker": "background.js" // 文件路径为插件根目录下哦
},
"permissions": ["activeTab", "scripting"] // 调用 chrome API 中需要声明的权限信息
复制代码Yes, for this plugin, the most critical are the above two fields
Let's look background.jsat what is written in:
// 监听插件图标的点击事件
chrome.action.onClicked.addListener(tab => {
// 在当前页面执行 script.js
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['script.js']
})
})
复制代码Then there is a very smooth transition to script.js, here is the logic to implement the page element drop:
/**
大致思路为：
1. 遍历页面元素，添加特定 class
2. 在 head 插入特定 class 的样式声明，让页面按照预期动起来
3. 动画结束后移除 head 的特定 class 声明
*/
// 寻找最底层节点并执行特定逻辑
function visit(node) {
if (node.children.length) {
for (const el of node.children) {
visit(el)
}
} else {
// 执行逻辑，如添加特定 class 等
node.classList.add('drop-off-extension')
}
}
// 添加特定样式声明
function addDropOffStyle() {
const style = document.createElement('style')
// 添加特定 class 的具体样式声明
style.innerHtml = '.drop-off-extension {transform-origin: top left; animation: hinge 2s; @keyframes hinge { 0% {animation-timing-function: ease-in-out;} 20%,60% {transform: rotate3d(0, 0, 1, 80deg);animation-timing-function: ease-in-out;} 40%,80% {transform: rotate3d(0, 0, 1, 60deg);animation-timing-function: ease-in-out;opacity: 1;} 100% {transform: translate3d(0, 700px, 0);opacity: 0;}}}'
document.head.appendChild(style)
// 动画执行结束后移除特定 class 样式声明
setTimeout(() => {
document.head.removeChild(style)
}, 6000)
}
visit(document.body) // 从 body 开始遍历
addDropOffStyle()
复制代码The last thing is to constantly debug and optimize the effect :)
final effect display
perfect~