たくさんの自由帳
Androidのお話
たくさんの自由帳
投稿日 : | 0 日前
文字数(だいたい) : 2740
どうもこんばんわ。
2024年06月、Manifest V2
廃止がついに始まったらしい?
始まってから移行するのかよって感じですが。
というわけで、今回はこのManifest V3
移行をやります。
チェックリストを用意してくれているので、これにそってやってみる。
https://developer.chrome.com/docs/extensions/develop/migrate/checklist?hl=ja
{
"name": "URLDecodeCopy",
"version": "1.2",
"manifest_version": 2,
のmanifest_version
を3
にします。また、審査に出す際にはバージョンも上げないといけないので、ついでに上げておくと良いかも
{
"name": "URLDecodeCopy",
"version": "1.3",
"manifest_version": 3,
拡張機能の権限(クリップボードとか)と、どのサイトで動かすか(拡張機能を動かすサイトのドメインとか)が一つのpermissions
でしたが、
V3
では分離されました。
{
"name": "URLDecodeCopy",
"version": "1.3",
"manifest_version": 3,
"description": "URLエンコードされたURLをURLデコードしてコピーします。",
"permissions": [
"activeTab",
"http://*/*",
"https://*/*",
"contextMenus",
"clipboardWrite"
],
分離して、こうですね。
{
"name": "URLDecodeCopy",
"version": "1.3",
"manifest_version": 3,
"description": "URLエンコードされたURLをURLデコードしてコピーします。",
"permissions": [
"activeTab",
"contextMenus",
"clipboardWrite"
],
"host_permissions": [
"http://*/*",
"https://*/*"
],
Service Worker
なので、document
とかwindow
とかのDOM
には触れないらしい。
WebExtensions API
叩くコードとDOM
触るコードが明確に分かれた?
v2
がこれで、
"background": {
"scripts": [
"background.js"
]
}
V3
だとこうです。
"background": {
"service_worker": "background.js",
"type": "module"
}
chrome://extensions
を開いて、読み込んでみます。
わんちゃんコード側の修正なしとかにならないかな()()
リロードを押して、、やっぱエラーなりますよね
ちゃんとV3
で動くように直します。
Unchecked runtime.lastError: Extensions using event pages or Service Workers must pass an id parameter to chrome.contextMenus.create
chrome.contextMenus.create
へ渡すオブジェクトにid
キーが無いかららしい。
https://developer.chrome.com/docs/extensions/reference/api/contextMenus?hl=ja#type-CreateProperties
別に拡張機能の中でユニークであればいいってことかな。
+ const ID_CURRENT_PAGE = "url_decode_copy_current_page"
chrome.contextMenus.create({
+ "id": ID_CURRENT_PAGE,
次はこれ
Unchecked runtime.lastError: Extensions using event pages or Service Workers cannot pass an onclick parameter to chrome.contextMenus.create. Instead, use the chrome.contextMenus.onClicked event.
"onclick"
が使えなくなったらしい。
chrome.contextMenus.onClicked.addListener
でメニューを押したときのコールバック関数がもらえるのでこれで。
switch
でメニューごとに分岐します。
// メニューを押した時
chrome.contextMenus.onClicked.addListener((info, tab) => {
switch (info.menuItemId) {
case ID_CURRENT_PAGE:
// 今のページの URL デコード
copy(decodeURI(tab.url))
break
case ID_ANCHOR_TAG:
// リンク先のページの URL デコード
copy(decodeURI(info.linkUrl))
break
}
})
document
を拡張機能のService Worker
から使おうとすると怒られます。
Error in event handler: ReferenceError: document is not defined at copy
本来はクリップボードにコピーするブラウザJS
のAPI
があるのでそれを使うべきなのですが、
Chrome
の拡張機能だとそのAPI
使えないんですよね。
仕方なくexecCommand('copy')
を使っているのですが、それにはDOM
操作が必要で、、、
ちなみにManifest V3
でもDOM
操作しか無いらしい。ServiceWorker
では触れないのでコンテンツスクリプト??とかいう奴にお願いするといいらしい。
DOM 触りたい場合(document
とかwindow
とか)はこのJS
を経由する必要がある。
https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts
manifest.json
に書くものだと思ってたんですけど、実行中に動的にコンテンツスクリプトを追加できるとか書いてある。
今回はたかだかコピーしたいだけなのでmanifest.json
に書きます。
manifest.json
を開いてcontent_script
の項目を足します。
"background": {
"service_worker": "background.js",
"type": "module"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content-script.js"
]
}
]
}
次にcontent-script.js
をmanifest.json
と同じフォルダへ追加します。
バックグラウンドスクリプトのServiceWorker
と、DOM を操作するコンテンツスクリプト
のやり取りはこれです。
https://developer.chrome.com/docs/extensions/develop/concepts/messaging
ServiceWorker
→content-script
の場合、送る側のServiceWorker
はこう
function sendCopyEvent(copy) {
(async () => {
const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true })
await chrome.tabs.sendMessage(tab.id, { copyValue: copy })
})();
}
受け取る側のcontent-script
はこう
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
const copyValue = request.copyValue
copy(copyValue)
})
でも動かない。manifest.json
に書いたよ?
→Webページ
をリロードしたらcontent-script.js
が読み込まれました。お騒がせしました。
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
content-script.js
、ブラウザで動くのでまあなんというか、
console.log
すればちゃんとF12
のコンソールに出てきます。
contextMenus
しか使ってないわ。
clipboardWrite
はnavigator.clipboard
のAPI
を使うときだけらしいし、
activeTab
もonClicked.addListener()
のコールバック関数使う分には特に書いてないので、使ってなさそう。
"manifest_version": 3,
"description": "URLエンコードされたURLをURLデコードしてコピーします。",
"permissions": [
- "activeTab",
- "contextMenus",
- "clipboardWrite"
+ "contextMenus"
],
"host_permissions": [
"http://*/*",
なんか久しぶりに開いたら赤い文字でびっくり
プライバシーについて追加で聞かれる程度だった、とりあえず審査に出してみる。→通りました!!!
https://github.com/takusan23/URLDecodeCopy
TypeScript
じゃないので、せめてもの救い//@ts-check
を使ってます。ありがとう。