코드 업데이트

다른 문제와 관련이 없는 업데이트

이는 확장 프로그램 서비스 워커에 포함되지 않은 코드에 필요한 변경사항을 설명하는 세 섹션 중 첫 번째 섹션입니다. 이 섹션은 다른 문제와 관련이 없는 필수 코드 변경사항을 위한 것입니다. 다음 두 섹션에서는 차단 웹 요청 대체 및 보안 개선을 다룹니다.

tabs.executeScript()를 scripting.executeScript()로 대체

Manifest V3에서 executeScript()는 tabs API에서 scripting API로 이동합니다. 이 경우 실제 코드 변경 외에도 매니페스트 파일의 권한을 변경해야 합니다.

executeScript() 메서드에는 다음이 필요합니다.

• "scripting" 권한.
• 호스트 권한 또는 "activeTab" 권한

scripting.executeScript() 메서드는 tabs.executeScript()에서 작동하는 방식과 유사합니다. 몇 가지 차이점이 있습니다.

• 이전 메서드는 단일 파일만 가져올 수 있었지만 새 메서드는 파일 배열을 가져올 수 있습니다.
• InjectDetails 대신 ScriptInjection 객체도 전달합니다. 두 가지에는 여러 차이점이 있습니다. 예를 들어 이제 tabId은 메서드 인수가 아닌 ScriptInjection.target의 멤버로 전달됩니다.

이 예시에서는 이 작업을 수행하는 방법을 보여줍니다.

async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();

browser.tabs.executeScript(
  tab.id,
  {
    file: 'content-script.js'
  }
);

async function getCurrentTab()
let tab = await getCurrentTab();

browser.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['content-script.js']
});

tabs.insertCSS() 및 tabs.removeCSS()를 scripting.insertCSS() 및 scripting.removeCSS()로 대체

Manifest V3에서 insertCSS() 및 removeCSS()은 tabs API에서 scripting API로 이동합니다. 이렇게 하려면 코드 변경 외에도 매니페스트 파일의 권한을 변경해야 합니다.

• "scripting" 권한.
• 호스트 권한 또는 "activeTab" 권한

scripting API의 함수는 tabs의 함수와 유사합니다. 몇 가지 차이점이 있습니다.

• 이러한 메서드를 호출할 때는 InjectDetails 대신 CSSInjection 객체를 전달합니다.
• 이제 tabId는 메서드 인수 대신 CSSInjection.target의 멤버로 전달됩니다.

이 예에서는 insertCSS()에 대해 이 작업을 수행하는 방법을 보여줍니다. removeCSS()의 절차도 동일합니다.

browser.tabs.insertCSS(tabId, injectDetails, () => {
  // callback code
});

const insertPromise = await browser.scripting.insertCSS({
  files: ["style.css"],
  target: { tabId: tab.id }
});
// Remaining code. 

브라우저 작업 및 페이지 작업을 작업으로 대체

브라우저 작업과 페이지 작업은 Manifest V2에서 별도의 개념이었습니다. 처음에는 역할이 달랐지만 시간이 지남에 따라 차이가 줄어들었습니다. 매니페스트 V3에서는 이러한 개념이 Action API로 통합됩니다. 이를 위해서는 Manifest V2 백그라운드 스크립트에 넣었을 내용과 다른 manifest.json 및 확장 프로그램 코드를 변경해야 합니다.

매니페스트 V3의 작업은 브라우저 작업과 가장 유사하지만 action API는 pageAction에서 제공한 hide() 및 show()를 제공하지 않습니다. 페이지 작업이 여전히 필요한 경우 선언적 콘텐츠를 사용하여 에뮬레이션하거나 탭 ID와 함께 enable() 또는 disable()를 호출하면 됩니다.

'browser_action' 및 'page_action'을 'action'으로 대체

manifest.json에서 "browser_action" 및 "page_action" 필드를 "action" 필드로 바꿉니다. "action" 필드에 관한 정보는 참조를 확인하세요.

{
  ...
  "page_action": { ... },
  "browser_action": {
    "default_popup": "popup.html"
   }
  ...
}

{
  ...
  "action": {
    "default_popup": "popup.html"
  }

  ...
}

browserAction 및 pageAction API를 action API로 대체

매니페스트 V2에서 browserAction 및 pageAction API를 사용한 경우 이제 action API를 사용해야 합니다.

browser.browserAction.onClicked.addListener(tab => { ... });
browser.pageAction.onClicked.addListener(tab => { ... });

browser.action.onClicked.addListener(tab => { ... });

콜백을 프라미스로 바꾸기

Manifest V3에서는 많은 확장 프로그램 API 메서드가 프로미스를 반환합니다. Promise는 비동기 메서드에서 반환된 값의 프록시 또는 자리표시자입니다. Promise를 사용해 본 적이 없다면 MDN에서 자세히 알아보세요. 이 페이지에서는 Chrome 확장 프로그램에서 이를 사용하기 위해 알아야 할 사항을 설명합니다.

하위 호환성을 위해 프로미스 지원이 추가된 후에도 많은 메서드가 콜백을 계속 지원합니다. 동일한 함수 호출에서 두 가지를 모두 사용할 수는 없습니다. 콜백을 전달하면 함수가 프로미스를 반환하지 않으며 프로미스를 반환하려면 콜백을 전달하지 마세요. 이벤트 리스너와 같은 일부 API 기능에는 콜백이 계속 필요합니다. 메서드가 프로미스를 지원하는지 확인하려면 API 참조에서 '프로미스' 라벨을 찾으세요.

콜백에서 프로미스로 변환하려면 콜백을 삭제하고 반환된 프로미스를 처리하세요. 아래 예는 선택적 권한 샘플, 특히 newtab.js에서 가져온 것입니다. 콜백 버전은 콜백을 사용하여 샘플이 request()을 호출하는 방식을 보여줍니다. 프로미스 버전은 async 및 await로 다시 작성할 수 있습니다.

browser.permissions.request(newPerms, (granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

const newPerms = { permissions: ['topSites'] };
browser.permissions.request(newPerms)
.then((granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

Manifest V2 백그라운드 컨텍스트를 예상하는 함수 바꾸기

다른 확장 프로그램 컨텍스트는 메시지 전달을 사용하여 확장 프로그램 서비스 워커와만 상호작용할 수 있습니다. 따라서 백그라운드 컨텍스트를 예상하는 호출을 다음으로 대체해야 합니다.

• browser.runtime.getBackgroundPage()
• browser.extension.getBackgroundPage()
• browser.extension.getExtensionTabs()

확장 프로그램 스크립트는 메시지 전달을 사용하여 서비스 워커와 확장 프로그램의 다른 부분 간에 통신해야 합니다. 현재는 sendMessage()를 사용하고 확장 프로그램 서비스 워커에서 browser.runtime.onMessage를 구현하여 이를 달성할 수 있습니다. 장기적으로 이러한 호출을 postMessage() 및 서비스 워커의 메시지 이벤트 핸들러로 대체해야 합니다.

지원되지 않는 API 교체

아래에 나열된 메서드와 속성은 Manifest V3에서 변경해야 합니다.