Chrome 확장 프로그램에서 현재 탭의 URL을 얻는 방법

그 프로젝트를 계속하기 전에 우리는 일찍 따라야 합니다. React를 사용하여 *Chrome 확장 프로그램을 만든 후 해당 단계를 진행합니다.

1. Chrome API 읽기 설정

그 단계에서는 주로 Chrome API에 접근하는 Our React 앱의 chrome 객체를 설치하려고 합니다. Chrome.tabs.query를 사용하여 브라우저 탭을 직접 쿼리할 수 있습니다. 먼저 해당 유형을 설치합니다.

yarn add @types/chrome

애드온은 단순히 현재 탭에 액세스하려면 activeTab 권한이 필요합니다. 매니페스트에 새 권한 키를 추가합니다.

"permissions": [
   "activeTab"
],

콘텐츠 스크립트는 웹 페이지에서 실행되는 JavaScript 파일이며 React와 별개입니다.

우리는 CRA가 코드를 개발하는 방법을 논의할 때 React가 단 하나의 코드 파일만 생성한다는 것을 배웠습니다. React 앱 파일과 콘텐츠 스크립트 파일을 어떻게 생성할 수 있습니까?

CRA 빌드 매개변수를 변경하여 두 개의 파일을 생성할 수 있습니다. Craco가 이를 도와줍니다.

Craco를 설치하려면,

yarn add  @craco/craco --save

그런 다음 프로젝트의 루트 디렉터리에 craco.config.js를 생성합니다. 이 파일은 빌드 설정을 재정의합니다.

module.exports = {
   webpack: {
       configure: (webpackConfig, {env, paths}) => {
           return {
               ...webpackConfig,
               entry: {
                   main: [env === 'development' && require.resolve('react-dev-utils/webpackHotDevClient'),paths.appIndexJs].filter(Boolean),
                   content: './src/chromeServices/DOMEvaluator.ts',
               },
               output: {
                   ...webpackConfig.output,
                   filename: 'static/js/[name].js',
               },
               optimization: {
                   ...webpackConfig.optimization,
                   runtimeChunk: false,
               }
           }
       },
   }
}

이제 다음과 같이 package.json 빌드 섹션을 업데이트할 수 있습니다.

"build": "INLINE_RUNTIME_CHUNK=false craco build",

02. 크롬 콘텐츠 스크립트

빌드 프로젝트의 일부로 content.js라는 파일을 만들었지만 Chrome에서 인식하지 못합니다.

브라우저가 이 파일에 대해 알고 콘텐츠 스크립트로 삽입하도록 확장을 구성합니다. 매니페스트 파일이 영향을 받습니다.

매니페스트에서 콘텐츠 스크립트가 지정됩니다. 각 스크립트는 파일 위치와 대상 URL을 제공해야 합니다.

이제 manifest.json 파일에 새 섹션을 추가합니다.

"content_scripts": [
   {
       "matches": ["http://*/*", "https://*/*"],
       "js": ["./static/js/content.js"]
   }
],

Chrome은 이러한 매개변수를 사용하여 content.js를 HTTP 및 HTTPS 웹사이트에 삽입합니다.

03. DOMEvaluator 콘텐츠 스크립트

설정, 라이브러리 및 설정이 준비되었습니다. 요청을 수락하고 정보를 React 구성 요소로 전송하기 위한 DOMEvaluator 콘텐츠 스크립트 및 메시징 API만 누락되었습니다.

누락된 파일을 만듭니다. 다음과 같이 src에 chromeServices 및 DOMEvaluator.ts를 생성합니다.

import { DOMMessage, DOMMessageResponse } from '../types';

const messagesFromReactAppListener = (
   msg: DOMMessage,
   sender: chrome.runtime.MessageSender,
   sendResponse: (response: DOMMessageResponse) => void) => {

   console.log('[content.js]. Message received', msg);

   const headlines = Array.from(document.getElementsByTagName<"h1">("h1"))
                       .map(h1 => h1.innerText);

   const response: DOMMessageResponse = {
       title: document.title,
       headlines
   };

   sendResponse(response);
}

chrome.runtime.onMessage.addListener(messagesFromReactAppListener);

04. 해당 DOMEvaluator 사용

탭 참조를 사용하여 사이트의 콘텐츠 스크립트에 메시지를 보낼 수 있습니다.

chrome.tabs.sendMessage(
   tabs[0].id || 0,
   { type: 'GET_DOM' } as DOMMessage,
response
   (response: DOMMessageResponse) => {
       console.log(response)
   });

Chrome 확장 프로그램에서 현재 탭의 URL을 가져오는 방법입니다.

고맙습니다,
J-Sandaruwan.