코드 업데이트

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

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

tab.executeScript()를scripting.executeScript()로 대체했습니다.

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

executeScript() 메서드의 경우 다음이 필요합니다.

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

scripting.executeScript() 메서드는 tabs.executeScript()를 사용한 방법과 비슷합니다. 몇 가지 차이점이 있습니다.

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

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

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

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

백그라운드 스크립트 파일

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

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

확장 프로그램 서비스 워커

Tab.insertCSS() 및 tab.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()의 절차는 동일합니다.

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

백그라운드 스크립트 파일

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

확장 프로그램 서비스 워커

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

브라우저 작업과 페이지 작업은 Manifest V2에서 별개의 개념이었습니다. 처음에는 서로 다른 역할로 시작했지만 시간이 지날수록 그 차이는 줄어들었습니다. Manifest V3에서 이러한 개념이 Action API에 통합되었습니다. Manifest V2 백그라운드 스크립트에 입력한 것과 다른 manifest.json 및 확장 프로그램 코드를 변경해야 합니다.

Manifest V3의 작업은 브라우저 작업과 가장 유사합니다. 그러나 action API는 pageAction와 달리 hide() 및 show()를 제공하지 않습니다. 여전히 페이지 작업이 필요하다면 선언적 콘텐츠를 사용하여 에뮬레이션하거나 탭 ID로 enable() 또는 disable()를 호출하면 됩니다.

'browser_action' 대체 및 'page_action' '액션' 포함

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

Manifest V2
{
  ...
  "page_action": { ... },
  "browser_action": {
    "default_popup": "popup.html"
   }
  ...
}
Manifest V3
{
  ...
  "action": {
    "default_popup": "popup.html"
  }

  ...
}

browserAction 및 pageAction API를 작업 API로 대체

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

Manifest V2
chrome.browserAction.onClicked.addListener(tab => { ... });
chrome.pageAction.onClicked.addListener(tab => { ... });
Manifest V3
chrome.action.onClicked.addListener(tab => { ... });

콜백을 프로미스로 대체

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

이전 버전과의 호환성을 위해, 많은 메서드가 프로미스 지원이 추가된 후에도 콜백을 계속 지원합니다. 같은 함수 호출에서 둘 다 사용할 수는 없다는 점에 유의하세요. 콜백을 전달하면 함수가 프로미스를 반환하지 않으며 프로미스가 반환되기를 원하는 경우 콜백을 전달하지 않습니다. 이벤트 리스너와 같은 일부 API 기능에는 계속 콜백이 필요합니다. 메서드가 프로미스를 지원하는지 확인하려면 'Promise' 라벨이 지정되어 있습니다.

콜백에서 프로미스로 변환하려면 콜백을 삭제하고 반환된 프로미스를 처리합니다. 아래 예는 선택적 권한 샘플(newtab.js)에서 가져온 것입니다. 콜백 버전은 콜백 사용 시 샘플의 request() 호출이 어떻게 표시되는지 보여줍니다. 프로미스 버전은 async와 await로 다시 작성할 수 있습니다.

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

Manifest V2 백그라운드 컨텍스트를 예상하는 함수 교체

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

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

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

지원되지 않는 API 교체

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

Manifest V2 메서드 또는 속성 다음으로 바꾸기
chrome.extension.connect() chrome.runtime.connect()
chrome.extension.connectNative() chrome.runtime.connectNative()
chrome.extension.getExtensionTabs() chrome.extension.getViews()
chrome.extension.getURL() chrome.runtime.getURL()
chrome.extension.lastError 메서드가 프로미스를 반환하는 경우 promise.catch() 사용
chrome.extension.onConnect chrome.runtime.onConnect
chrome.extension.onConnectExternal chrome.runtime.onConnectExternal
chrome.extension.onMessage chrome.runtime.onMessage
chrome.extension.onRequest chrome.runtime.onMessage
chrome.extension.onRequestExternal chrome.runtime.onMessageExternal
chrome.extension.sendMessage() chrome.runtime.sendMessage()
chrome.extension.sendNativeMessage() chrome.runtime.sendNativeMessage()
chrome.extension.sendRequest() chrome.runtime.sendMessage()
chrome.runtime.onSuspend (백그라운드 스크립트) 확장 프로그램 서비스 워커에서는 지원되지 않습니다. 대신 beforeunload 문서 이벤트를 사용하세요.
chrome.tabs.getAllInWindow() chrome.tabs.query()
chrome.tabs.getSelected() chrome.tabs.query()
chrome.tabs.onActiveChanged chrome.tabs.onActivated
chrome.tabs.onHighlightChanged chrome.tabs.onHighlighted
chrome.tabs.onSelectionChanged chrome.tabs.onActivated
chrome.tabs.sendRequest() chrome.runtime.sendMessage()
chrome.tabs.Tab.selected chrome.tabs.Tab.highlighted