브라우저 확장 - 팝업 페이지 수정

우리는 이미 made all the websites we visit pink 기본 확장을 만들었지만 팝업 확장 내부의 버튼을 클릭할 때만 해당 작업이 발생하도록 하려면 어떻게 해야 합니까?

자, 이 글에서 우리는 바로 그것을 배울 것이고, 더 좋은 것은 이전 글에서 우리가 구현한 local storage의 색상을 기반으로 한다는 것입니다.

이 문서를 따르려면 이 문서GitHub branch를 시작점으로 사용하세요.

팝업 확장은 페이지를 수정합니다.

오늘 달성하고자 하는 것은 팝업 확장 내부의 버튼을 클릭하면 활성 탭의 색상이 변경된다는 것입니다.



먼저 manifest.json 파일에 몇 가지 새 권한을 추가해야 합니다.

{
  "permissions": ["alarms", "notifications", "storage", "activeTab", "scripting"],
}

새 항목은 activeTab 및 scripting 입니다.
다음을 수행합니다.

activeTab를 사용하면 활성 탭

을 수정하고 검색할 수 있습니다.

scripting 브라우저를 통해 스크립트를 삽입할 수 있습니다

.

이제 계속해서 팝업 페이지를 수정해 보겠습니다. src/App.jsx 파일을 열고 렌더링 섹션에 버튼을 추가합니다.

return <button onClick={colorize}>Colorize 💖</button>;

이제 이colorize 함수를 추가해 보겠습니다.

const colorize = async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: changeColor,
  });
};

이것은 매우 복잡해 보이지만 걱정하지 마십시오. 이를 안내해 드리겠습니다.

먼저 활성 탭을 가져와야 합니다. 이를 위해 탭 쿼리를 사용할 수 있습니다.

활성 탭이 있으면 크롬 스크립팅 API를 호출할 수 있습니다.
해당 탭에 스크립트나 간단한 함수를 삽입할 수 있는 executeScript 함수를 호출합니다.
우리의 경우에는 changeColor 함수를 주입합니다.

그런 다음 이 함수를 이 파일에 추가하여 사용할 수 있습니다.

const changeColor = () => {
  chrome.storage.sync.get('color', ({ color }) => {
    document.body.style.backgroundColor = color;
  });
};

이 기능은 로컬 저장소를 읽고 여기에서 색상을 가져옵니다.
그런 다음 문서 본문을 해당 색상으로 설정합니다.

짜잔!
버튼을 클릭하면 모든 웹사이트를 변경할 수 있습니다!

Note: Remember that we added the colors in local storage? You can play around by changing the color in your options.

GitHub에서 전체 코드를 찾을 수도 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나