バックグラウンド
ある夜、ナゲッツを閲覧しているときに、偶然にナゲッツを爆撃するというクリエイティブなゲームを発見しました。以前はページの要素を分離する特殊効果を作りたいと思っていたのですが、練習しなかったので、仕事で忙しかった（lan）、そして今は流行のため家にいる。オフィス、以前よりも多くの時間あえて釣りをする、この機会にそれを実現してみませんか？
ドキュメントを参照してください
次に、袖をまくり上げて実行します。一般的な考え方は、クロムプラグインを使用してページ要素が脱落する効果を実現することです。そのため、最初にGoogleプラグイン開発ドキュメント（はしごが必要）を確認し、徐々に明確にします。いくつかのポイント
最初はマニフェストファイルです
すべてのプラグインには、プラグインに関するいくつかの重要な情報を提供するmanifest.jsonファイルが必要です。
必須フィールドの中で：
| フィールド名 | 説明 |
|---|---|
| マニフェストバージョン | マニフェストファイルのバージョンを説明する |
| 名前 | プラグイン名 |
| バージョン | プラグインのバージョン |
推奨フィールド：
| フィールド名 | 説明 |
|---|---|
| 説明 | プラグインの紹介 |
| アイコン | プラグインアイコン |
| アクション | APIを使用chrome.actionして、ブラウザツールバーのプラグインアイコンの動作を制御します |
より強力と思われるその他のフィールド：
| フィールド名 | 説明 |
|---|---|
| バックグラウンド | service_workerが登録されている場所 |
| コマンド | プラグインにショートカットキーを追加する |
| content_scripts | 現在のWeb環境で実行するファイル |
| 権限 | 実行時に必要なプラグイン権限を宣言します |
2つ目は、プラグインによって提供される機能です。
プラグインを作成する前に、プラグインが提供できる優れた機能を知っておく必要があります。開発ドキュメントには、次の2つの優れた要約があります。
次に、達成したい機能に応じて調整します
書き込みロジック
ツールバーのプラグインアイコンをクリックすると、ページ要素が落ち始めます。そのため、APIドキュメントをチェックして、プラグインアイコンのクリックイベントを監視し、ページコンテンツを操作する方法を確認する必要があります。
すぐに、私の目はこれら2つのAPIに注目しています。
chrome.action.onClickedプラグインアイコンをクリックしますchrome.scripting別のページでスクリプトを実行する
これですべての準備が整いました。コードだけが欠落しています。最初にmanifest.jsonファイル。
// 这里只列出运行逻辑相关的字段哈
"background": { // 还记得之前在表格里介绍的 background 字段吗 嘿嘿
"service_worker": "background.js" // 文件路径为插件根目录下哦
},
"permissions": ["activeTab", "scripting"] // 调用 chrome API 中需要声明的权限信息
复制代码はい、このプラグインの場合、最も重要なのは上記の2つのフィールドです
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()
复制代码最後に、効果を常にデバッグして最適化することです:)
最終効果表示
完璧〜