TurboReader 브라우저 확장 만들기

지금까지 다양한 요소를 잘 혼합했습니다. 이 기사에서는 내가 어떻게 turboReader 브라우저 확장을 만들었는지 보여줍니다.

터보 읽기에 익숙하지 않은 분들을 위해 단어를 부분적으로 진하게 수정하여 읽기 속도를 높이는 개념입니다. 이 개념을 Bionic reading이라고 합니다.

Bionic reading에 대해 자세히 알아보십시오.

이 기사에서는 바이오닉의 API를 사용하지 않고 스크립트 버전의 출력을 선택합니다.

결과는 모든 웹페이지에서 작동할 수 있는 환상적인 확장 기능입니다.

프로젝트 설정

먼저 프로젝트 설정부터 시작하겠습니다. 옵션 버튼을 클릭하면 확장 기능이 작동합니다.
따라서 매니페스트 및 백그라운드 작업자만 필요합니다.

새 폴더를 만들고 탐색하는 것으로 시작하겠습니다.

mkdir turboReader && cd turboReader

안으로 들어가면 프로젝트를 열고 manifest.json 파일을 추가하여 시작합니다.

{
  "manifest_version": 3,
  "version": "1.0",
  "name": "TurboReader",
  "description": "Become a faster reader with TurboReader",
  "action": {},
  "icons": {
    "48": "icons/icon-48.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [ "activeTab", "scripting"]
}

보시다시피 매니페스트 버전 3을 사용합니다.
그런 다음 작업 아이콘에 처리기를 연결하는 데 필요한 빈 작업 개체도 정의합니다.
그리고 백그라운드 작업자를 background.js라는 파일로 설정합니다.
마지막으로 활성 탭에 스크립팅을 삽입하려면 권한이 필요합니다.

계속해서 background.js 파일을 생성해 보겠습니다.
먼저 옵션 버튼을 클릭하면 실행되는 작업을 추가해야 합니다.

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

여기에서 활성 탭을 가져오고 turboMode 라는 함수를 삽입합니다.

이제 turboMode 함수를 생성하십시오.

const turboMode = () => {
  // Our function
};

터보 읽기 모드 기능 만들기

이 기능을 수행하려면 먼저 페이지의 모든 단락을 검색해야 합니다.

const paragraphs = document.getElementsByTagName('p');

그런 다음 아직 터보 읽기 모드에 있지 않은지 확인하고 싶습니다. 본문에 특정 클래스가 추가되었는지 확인하여 이를 수행합니다.

const isTurboMode = document.body.classList.contains('trms');

그런 다음 각 단락을 반복하고 각각에 대해 작업을 수행할 수 있습니다.

for (const paragraph of paragraphs) {
  if (isTurboMode) {
    // Turbo mode is one
  } else {
    // Turbo mode is off
  }
}

터보 모드가 켜져 있으면 단락을 원래 형식으로 되돌려야 합니다.
innerText를 HTML이 아닌 버전으로 대체하여 이를 수행합니다.

paragraph.innerText = paragraph.innerText;

Note: side effect could cause existing bold/italic markup to be removed. 😅

터보 모드가 아닌 경우 각 단락의 텍스트를 가져와서 단어별로 분할해야 합니다.
그런 다음 각 단어를 매핑하고 결국 사이에 공백을 두고 반환합니다.

paragraph.innerHTML = paragraph.innerText
  .split(' ')
  .map((word) => {
    // Each word
  })
  .join(' ');

이제 재미있는 부분이 있습니다. 굵게 표시할 단어의 부분을 평가해야 합니다.

여기서 내 생각은 단어의 절반을 대략적으로 볼드하게 만들 수 있다는 것입니다.
이를 달성하려면 먼저 단어의 길이를 결정해야 합니다.

const length = word.replace(/[^a-zA-Z0-9]+$/, '').length;

그런 다음 굵게 만들 부분의 길이를 얻을 수 있습니다. 단어가 한 글자이면 항상 굵게 표시되어야 합니다. 그렇지 않으면 길이의 절반을 마루로 만듭니다.

const boldLength = length === 1 ? 1 : Math.floor(length / 2);

그런 다음 단어를 반환하지만 전반부는 굵게 표시됩니다.

return `<strong>${word.substring(0, boldLength)}</strong>${word.substring(
  boldLength
)}`;

루프 외부의 마지막 부분은 터보 모드인지 여부를 결정하는 본문 클래스를 추가하는 것입니다.

isTurboMode
  ? document.body.classList.remove('trms')
  : document.body.classList.add('trms');

그리고 그게 다야. 이제 전체 기능은 다음과 같습니다.

const turboMode = () => {
  const paragraphs = document.getElementsByTagName('p');
  const isTurboMode = document.body.classList.contains('trms');
  for (const paragraph of paragraphs) {
    if (isTurboMode) {
      paragraph.innerText = paragraph.innerText;
    } else {
      paragraph.innerHTML = paragraph.innerText
        .split(' ')
        .map((word) => {
          const length = word.replace(/[^a-zA-Z0-9]+$/, '').length;
          const boldLength = length === 1 ? 1 : Math.floor(length / 2);
          return `<strong>${word.substring(
            0,
            boldLength
          )}</strong>${word.substring(boldLength)}`;
        })
        .join(' ');
    }
  }

  isTurboMode
    ? document.body.classList.remove('trms')
    : document.body.classList.add('trms');
};

여기에서 완성된 코드를 찾을 수도 있습니다GitHub repo.

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

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