фон
Однажды ночью, просматривая Наггетс, я случайно обнаружил творческую игру Bombing the Nuggets, я был в шоке и подумал, что раньше хотел сделать специальный эффект, который разделяет элементы страницы, но я не практиковал это, потому что я был занят работой (лан), а теперь сижу дома из-за эпидемии.Офис, больше времени, чем раньшеосмелиться ловить рыбу, почему бы не воспользоваться этой возможностью, чтобы это произошло?
Обратитесь к документации
Потом засучиваем рукава и делаем.Общая идея заключается в том,чтобы с помощью плагина для хрома добиться эффекта отваливающихся элементов страницы,поэтому сначала проверяйте документ по разработке плагина Google (нужна лесенка),и постепенно уточняйте несколько пунктов
Во-первых, это файл манифеста.
Каждый плагин должен иметь файл manifest.json, в котором содержится важная информация о плагине.
Среди обязательных полей:
| имя поля | объяснять |
|---|---|
| manifest_version | Опишите версию файла манифеста |
| название | имя плагина |
| версия | версия плагина |
Рекомендуемые поля:
| имя поля | объяснять |
|---|---|
| описание | Знакомство с плагинами |
| иконки | Значок плагина |
| действие | Используйте chrome.actionAPI для управления поведением значка плагина на панели инструментов браузера. |
Другие поля, которые кажутся более мощными:
| имя поля | объяснять |
|---|---|
| фон | где зарегистрирован service_worker |
| команды | Добавьте горячие клавиши в плагины |
| content_scripts | Файл для запуска в текущей веб-среде |
| разрешения | Объявить разрешения плагина, необходимые во время выполнения |
Во-вторых, возможность, предоставляемая плагином
Прежде чем писать плагин, мы должны знать, какие классные функции он может предоставить, не так ли?В документации по разработке есть два хороших резюме:
Затем отрегулируйте его в соответствии с функцией, которую вы хотите достичь
написать логику
Мы хотим щелкнуть значок плагина на панели инструментов, и элементы страницы начинают падать, поэтому нам нужно проверить документацию API, чтобы узнать, как отслеживать событие щелчка значка плагина и манипулировать содержимым страницы.
Быстро, я смотрю на эти два API:
chrome.action.onClickedЩелкните значок плагинаchrome.scriptingВыполнение скриптов на разных страницах
Теперь все готово, не хватает только кода, давайте сначала организуем manifest.jsonфайлы , и подытожим информацию о плагине:
// 这里只列出运行逻辑相关的字段哈
"background": { // 还记得之前在表格里介绍的 background 字段吗 嘿嘿
"service_worker": "background.js" // 文件路径为插件根目录下哦
},
"permissions": ["activeTab", "scripting"] // 调用 chrome API 中需要声明的权限信息
复制代码Да, для этого плагина наиболее критичны два вышеуказанных поля
Смотрим, background.jsчто написано в:
// 监听插件图标的点击事件
chrome.action.onClicked.addListener(tab => {
// 在当前页面执行 script.js
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['script.js']
})
})
复制代码Затем идет очень плавный переход к script.js, вот логика реализации перетаскивания элементов страницы:
/**
大致思路为：
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()
复制代码Последнее — постоянно отлаживать и оптимизировать эффект :)
отображение финального эффекта
идеально~