はじめに
MV3で何が変わるの、か？
Chromeオフィシャルサイトによると大まかには以下が変更点という、ことらしい。
機能の概要
- サービスワーカーによるバックグラウンドページの置き換え。
- ネットワークリクエストの変更は、declarativeNetRequestAPIで処理される。
- リモートでホストされたコードは許可されず、パッケージに含まれているJavaScriptのみを実行可能。
- 多くのメソッドにPromiseのサポートを追加。
えーっと、、とりあえずわかったふりをしつつ、、。
やってみよう
今回MV3に移行するExtensionsでは、バックグラウンド処理としてはコンテキストメニューのみ。ただ、formをDOM生成してPOST送信している。だが、DOMは扱えない、んだ。
どうするのか？
解決策としては2つ。
- 個人情報は扱ってなく、受信側もPOST・GET両方に対応させてるので、GET送信に変更。
- 新しくTabページを開いてPOST送信。
まずは、
manifest.jsonの更新
manifest.json
{
- "manifest_version": 2,
+ "manifest_version": 3,
...
- "browser_action": {
+ "action": {
"default_icon": {
"16": "img/icon16.png",
"32": "img/icon32.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"default_title": "__TITLE__",
"default_popup": "popup.html"
},
- "content_scripts": [
- {
- "matches": [ "http://*/*", "https://*/*" ],
- "js": [ "js/jquery-3.6.0.min.js", ... ]
- }
- ],
"permissions" : [
"activeTab",
- "contextMenus",
+ "contextMenus"
- "http://*/*",
- "https://*/*"
],
+ "host_permissions": [
+ "http://*/*",
+ "https://*/*"
+ ],
"background": {
- "scripts": [ "background.js" ],
- "persistent": false
+ "service_worker": "background.js"
}
}
content_scriptsの理解が出来てなく、パッケージ内で使用してるjsを全て書いていたので削除しました。
バックグラウンド処理
GETで送信 に変更する場合
background.js
chrome.contextMenus.removeAll(function() {
chrome.contextMenus.create({
id: '__ID__',
title: '__TITLE__',
contexts: ['image', 'video'],
type: 'normal'
});
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == '__ID__') {
- var frm = document.createElement('form');
- frm.setAttribute('method', 'POST');
- frm.setAttribute('target', '_blank');
- frm.setAttribute('action', '__URL__');
- var req = document.createElement('input');
- req.setAttribute('type', 'hidden');
- req.setAttribute('name', 'img_url');
- req.setAttribute('value', info.srcUrl);
- frm.appendChild(req);
- document.body.appendChild(frm);
- frm.submit();
+ chrome.tabs.create({ url: '__URL__?img_url=' + info.srcUrl });
}
});
GETメソッドで扱えるデータに上限があるので、今回はPOSTを選択。
POSTで送信 する場合
background.js
chrome.contextMenus.removeAll(function() {
...
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == '__ID__') {
- ...
+ postForm('__URL__', {'img_url': info.srcUrl});
+
+ function postForm(url, data) {
+ chrome.tabs.create(
+ { url: chrome.runtime.getURL('postform.html') },
+ function(tab) {
+ var handler = function(tabId, changeInfo) {
+ if(tabId == tab.id && changeInfo.status == "complete"){
+ chrome.tabs.onUpdated.removeListener(handler);
+ chrome.tabs.sendMessage(tabId, {url: url, data: data});
+ }
+ }
+ chrome.tabs.onUpdated.addListener(handler);
+ chrome.tabs.sendMessage(tab.id, {url: url, data: data});
+ }
+ );
+ }
}
});
新しくTabページを開き、ServiceWorkerとページ間でメッセージのやり取りが可能なので、開いたページ（postform.html）にdataを渡します。
postform.html
<html><body><script src="js/postform.js"></script></body></html>
開いたページではDOM操作が可能だが、インラインJavaScriptは書くことが出来ないので注意が必要です。
postform.js
var onMessageHandler = function(message){
chrome.runtime.onMessage.removeListener(onMessageHandler);
var frm = document.createElement('form');
frm.setAttribute('method', 'post');
frm.setAttribute('action', message.url);
for(var key in message.data) {
var req = document.createElement('input');
req.setAttribute('type', 'hidden');
req.setAttribute('name', key);
req.setAttribute('value', message.data[key]);
frm.appendChild(req);
}
document.body.appendChild(frm);
frm.submit();
}
chrome.runtime.onMessage.addListener(onMessageHandler);
メッセージを受け取ったらformをDOM生成しPOST送信。
まとめ
バックグラウンドでDOMが扱えなくなった、んだ。どうにかDOMを扱うことは出来ないのか？、、fake-domのようなもので代替出来ないのか？、、、、試行錯誤し、、模索し、あきらめかけましたが、、新しく開いたページではDOM操作が可能という事だったので、MV2と同じ機能のままMV3に移行することが出来ました。
今回MV3に移行したChrome Extensions