Chrome 확장 프로그램을 Manifest V3로 마이그레이션하면서 얻은 교훈

Mouse Dictionary의 Manifest V3 마이그레이션 기록입니다.

배경

매니페스트 V3란 무엇입니까?

기존 Chrome 확장 프로그램은 Manifest V3로 마이그레이션하지 않는 한 2023년에 작동이 중지됩니다.

( Manifest V2 support timeline )


이것은 여기서 주요 주제가 아니므로 official documentation 및 을 참조하십시오.

Mouse Dictionary는 2018년에 출시된 Manifest V2 확장이므로 조만간 V3로 마이그레이션해야 했습니다.

브라우저 간 문제

2022년 5월 기준으로 Firefox는 아직 Manifest V3를 지원하지 않으므로 Firefox 버전은 V2로 유지되어야 합니다. 이는 크로스 브라우저 확장이 V2와 V3를 모두 지원해야 한다는 것을 의미하며 이는 상당히 번거로운 일입니다.

마우스 사전은 크롬 버전을 V3로 마이그레이션하면서 파이어폭스 지원을 유지하기 위해 노력하였으니, 유사한 상황에 처한 경우 이 페이지를 참고하시기 바랍니다.

실제 마이그레이션

사용 가능한 공식 마이그레이션 가이드가 있습니다.
https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/

다음은 실제 일상적인 이주 작업에 대한 기록이다.

준비 1: eval 제거

매니페스트 V3에는 eval() and new Function()에 더 많은 제한이 있습니다.

Mouse Dictionary는 Mustache 엔진으로 사용하고 있었지만 내부적으로는 new Function()을 사용하고 있었기 때문에 V3 마이그레이션 과정에서 걸림돌이었습니다.

따라서 Hogan.js에서 mustache.js으로 이동하여 new Function()를 제거했습니다.

Hogan.js, mustache.js 및 Handlebars는 원래 Mustache 엔진의 후보로 간주되었으며 Hogan.js는 마우스 사전 사용이 가장 빠릅니다.

나는 mustache.js가 확장 프로그램의 새로운 Mustache 엔진이 될 수 있을 만큼 충분히 호환되고 빠르다는 것을 확인했습니다.

준비 2: 각 브라우저에 맞게 빌드

Chrome 버전을 V3로 마이그레이션하고 Firefox 버전을 유지하려는 경우 모든 브라우저에 대해 단일 manifest.json을 준비하는 것은 불가능합니다. 빌드 시 패키지.

마우스 사전의 경우 적절한 manifest.json이 빌드 시 패키지에 포함됩니다.

코드 및 구성 변경

View changes on GitHub

암호

chrome.browserAction -> chrome.action

V3에서는 chrome.browserAction를 chrome.action로 변경해야 합니다. 반대로 V2(Firefox)에서는 chrome.action가 없고 chrome.browserAction를 사용해야 합니다. 크로스 브라우저를 유지하려면 일종의 장치가 필요합니다.

이를 구현하는 방법은 여러 가지가 있지만 브라우저 간 호환성이 필요한 유일한 코드이므로 webpack 상수를 사용했습니다.

if (BROWSER === "CHROME") {
  chrome.action.onClicked.addListener((tab) => {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ["main.js"],
    });
  });
} else {
  chrome.browserAction.onClicked.addListener(() => {
    chrome.tabs.executeScript({
      file: ". /main.js",
    });
  });
}

그건 그렇고, 아래 코드도 작동합니다.

if (chrome.action) {
  chrome.action.onClicked.addListener((tab) => {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ["main.js"],
    });
  });
} else {
  chrome.browserAction.onClicked.addListener(() => {
    chrome.tabs.executeScript({
      file: ". /main.js",
    });
  });
}

전자는 불필요한 처리가 빌드 시간에 사라지기 때문에 조금 더 경제적입니다.

chrome.extension -> chrome.runtime

chrome.extension와 chrome.runtime는 모두 V2(Firefox)에서 작동하므로 간단히 교체했습니다.

- const url = chrome.extension.getURL(fname);
+ const url = chrome.runtime.getURL(fname);

매니페스트.json

권한

- "permissions": ["storage", "unlimitedStorage", "activeTab"],
+ "permissions": ["storage", "unlimitedStorage", "activeTab", "scripting"],

배경

   "background": {
- "scripts": ["background.js"],
- "persistent": false
+ "service_worker": "background.js"
   },

명령

   "commands": {
- "_execute_browser_action": {
+ "_execute_action": {
       "description": "Activate the extension"
     },

web_accessible_resources

- "web_accessible_resources": ["data/*.json"]
+ "web_accessible_resources": [
+ {
+ "resources": ["data/rule.json", "data/dict*.json"],
+ "matches": ["<all_urls>"]
+ }
+ ]

해결되지 않은 문제

로컬 파일에서는 작동하지 않습니다.

마우스 사전은 Chrome에서 열린 로컬 HTML 문서에서 작동했지만 V3 마이그레이션 이후에는 더 이상 작동하지 않습니다. web_accessible_resources가 file:///~로 열린 탭에서 작동하지 않는 원인을 알고 있지만 이에 대한 공식 정보를 찾을 수 없으므로 이것이 V3의 의도된 변경인지 Chrome의 버그인지 알 수 없습니다. , 그래서 나는 기다리고보고 있습니다.

(참고)

https://stackoverflow.com/questions/69736887/web-accessible-resources-manifest-key-is-ignored-if-respective-resources-are-i

https://bugs.chromium.org/p/chromium/issues/detail?id=1264366

바로 가기 키 설정 동작이 이상합니다.

마우스 사전은 바로 가기 키를 설정할 수 있지만 V3로 마이그레이션한 후 동작이 상당히 안정적이지 않습니다. 단축키는 설정하자마자 바로 반영되지 않고 크롬을 재시작하면 반영되는 것 같습니다. 확장 프로그램 개발자 측에서 할 수 있는 일이 없으므로 어떻게 진행되는지 지켜볼 뿐입니다.

인상

이는 마우스 사전의 경우일 뿐, 변경된 코드의 양은 적었다. 그러나 아직 Manifest V3 마이그레이션 경험에 대한 웹상 정보가 거의 없기 때문에 V2와 마찬가지로 작동하도록 코드를 변경하는 방법을 조사하고 시행 착오하고 확인하는 것이 어렵습니다.