Chrome 확장 프로그램 빌드를 위한 빠른 가이드

이 자습서에서는 명시적인 단어가 브라우저에 표시되지 않도록 차단하는 Chrome 확장 프로그램을 빌드합니다. 빠른 시연을 위해 표지 사진을 참조하십시오.

0단계: Manifest.json

첫 번째 단계는 모든 확장에 필요한 manifest.json 파일을 만드는 것입니다. 이 파일에는 확장에 대한 모든 기본 정보가 포함됩니다.
name 키로 이 객체에 확장 이름을 지정하고 version 키로 버전을 지정합니다. content_scripts에는 확장과 관련된 모든 HTML, CSS 및 JS 파일과 확장이 적용될 URL 목록이 있습니다. 모든 웹사이트에 대해 확장 기능이 활성화되기를 원하므로 일치 배열에서 <all_urls>를 사용할 것입니다. 여기에는 script.js 라는 이름의 자바스크립트 파일도 포함됩니다.

아래는 이 파일의 코드입니다

{
  "manifest_version": 2,
  "name": "Explicit Word Blocker",
  "version": "0.1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["script.js"]
    }
  ]
}

1단계: Script.js

이제 script.js 파일의 경우 웹 페이지에서 명시적인 단어가 포함된 모든 단일 요소를 차단된 텍스트로 바꾸는 함수를 만들어야 합니다. 이를 위해 명시적 단어가 있는 모든 요소를 ​​찾을 때까지 모든 단일 요소와 그 자식을 반복하는 재귀 함수를 사용할 것입니다.
replaceWords 라는 하나의 인수를 사용하는 element 라는 함수를 만듭니다. 요소에 자식 노드가 있는지 확인하는 조건이 있는 if-else 블록이 포함됩니다. 요소에 자식 노드가 있는 경우 해당 자식 노드 각각에서 replaceWords 함수를 호출합니다. else 조건은 요소 유형이 텍스트인지 확인하고 이 블록 내에서 전역 및 대소문자 무시에 대해 gi 플래그가 있는 정규식을 사용합니다. 이 정규식은 명시적인 텍스트가 있는 모든 단어를 찾습니다. 그런 다음 이 텍스트 요소는 분류된 문서에서 볼 수 있는 것과 유사한 블랙 박스로 대체됩니다. 결국 이 함수는 문서 본문에서 호출됩니다.

아래는 이 파일의 코드입니다

function replaceWords(element) {
  if (element.hasChildNodes()) {
    element.childNodes.forEach(replaceWords);
  } else if (element.nodeType === Text.TEXT_NODE) {
    element.textContent = element.textContent.replace(/fuck/gi, '████');
    element.textContent = element.textContent.replace(/fucking/gi, '████');
    element.textContent = element.textContent.replace(/fucker/gi, '████');
  }
}

replaceWords(document);

2단계: 확장 프로그램 로드

이 확장 프로그램이 작동하는지 보려면 다음 단계를 따르세요.

크롬으로 이동하여 검색창에 chrome://extensions/를 입력하십시오.

오른쪽 상단 모서리에 있는 개발자 토글을 켭니다.

왼쪽 상단 모서리에 있는 Load unpacked 버튼을 클릭하여 확장 프로그램을 로드합니다.

manifest.json 및 script.js 파일이 포함된 폴더로 이동합니다. 그러면 확장이 활성화됩니다.

이것이 바로 여러분이 브라우저에 나타나는 노골적인 단어를 차단하는 간단한 크롬 확장 프로그램을 만든 것입니다.