코드 업데이트

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

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

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.json 및 Manifest V2 백그라운드 스크립트에 입력한 것과 다른 확장 프로그램 코드를 변경해야 합니다.

Manifest V3의 작업은 브라우저 작업과 가장 흡사하지만 action API는 pageAction와 마찬가지로 hide() 및 show()를 제공하지 않습니다. 여전히 페이지 작업이 필요한 경우 선언적 콘텐츠를 사용하여 에뮬레이션하거나 탭 ID로 enable() 또는 disable()를 호출할 수 있습니다.

'browser_action' 및 'page_action'을 '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 기능에는 계속 콜백이 필요합니다. 메서드가 프로미스를 지원하는지 확인하려면 API 참조에서 '프로미스' 라벨을 찾아보세요.

콜백에서 프로미스로 변환하려면 콜백을 삭제하고 반환된 프로미스를 처리합니다. 아래 예는 선택적 권한 샘플(구체적으로 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.onRequest
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