이 게시물에서는 실제 브라우저 확장을 생성합니다. "실제"라는 것은 이것이 단순한 데모가 아니라는 것을 의미합니다. 조금만 더 작업하면 이것을 첫 번째 확장으로 게시할 수 있습니다 :)

목표

시각 장애가 있거나 기타 조건이 있는 사람들이 웹을 더 쉽게 검색할 수 있도록 브라우저 확장 프로그램을 만들 예정입니다.

이 확장 기능에는 사용자가 글꼴 크기, 색상 등을 변경할 수 있는 기능을 제공하는 도구가 있습니다.

요구 사항 / 도구

js, html의 기본 지식

코드 편집기(팁: 학생이라면 모든 jetbrains 소프트웨어를 무료로 사용할 수 있습니다)

내 설정:

OS: 페도라 리눅스

브라우저: 파이어폭스

IDE: 웹스톰

나는 또한 web-ext을 사용하고 있는데 확장 프로그램 개발에 도움이 되는 CLI 도구입니다.

예: web-ext run는 확장 프로그램을 테스트할 수 있도록 새 임시 프로필로 새 Firefox 창을 시작합니다.
소스를 변경하면 확장 프로그램이 자동으로 다시 로드됩니다.

현재 web-ext는 파이어폭스만 지원하지만 여러분의 삶을 훨씬 더 쉽게 만들어 줄 것입니다.

확장 기능 작동 방식

확장 프로그램이 존재하는 브라우저에는 3 + 1개의 "위치"가 있습니다.

background: 이름에서 알 수 있듯이 이 부분은 백그라운드에서 실행되며 UI가 없습니다. 여기에서 http 요청 수정과 같은 멋진 작업을 수행할 수 있습니다

.

콘텐츠: 방문하는 웹사이트에 js, css 등을 삽입할 수 있는 방법입니다

.

팝업: 주소 표시줄 오른쪽에 아이콘이 표시되며 클릭하면 팝업이 표시될 수 있습니다

.

옵션: 사용자가 확장 프로그램의 설정을 변경할 수 있는 html 페이지입니다

.

파일 구조

이것은 내 개인 취향의 예이며 확장자는 유사한 파일 구조를 갖습니다.

매니페스트 파일

모든 확장에는 manifest.json가 있어야 합니다. 이것은 확장에 대한 모든 정보가 포함된 파일입니다.

이름, 버전 등과 같은 확장 프로그램의 기본 정보를 추가해야 합니다.

{
  "name": "Accessibility Helper",
  "version": "1.0.0",
  "description": "Accessibility Helper",
  "homepage_url": "https://github.com/chr314/accessibility-extension",
  "author": "Aslanov Christoforos",
  "manifest_version": 2,
  "icons": {
    "16": "assets/icon.16.jpg",
    "48": "assets/icon.48.jpg",
    "128": "assets/icon.128.jpg"
  },

여기서 사용할 권한을 추가해야 합니다.
<all_urls>는 확장 프로그램이 모든 웹 페이지에 액세스할 수 있음을 의미하며 https://*.example.com/*와 같은 사용자 정의를 추가할 수 있습니다.

또한 tabs 권한을 사용하여 현재 탭에 액세스합니다.

필요하지 않은 권한을 추가하지 않도록 주의하세요.

  "permissions": [
    "<all_urls>",
    "tabs"
  ],

browser_action 주소 표시줄 오른쪽에 있는 확장 프로그램 아이콘을 클릭할 때 열리는 항목을 관리합니다.

  "browser_action": {
    "default_title": "Accessibility Helper",
    "default_popup": "src/popup/popup.html",
    "default_icon": {
      "16": "assets/icon.16.jpg",
      "48": "assets/icon.48.jpg",
      "128": "assets/icon.128.jpg"
    }
  },

content_scripts에서 웹 페이지에 삽입할 항목을 설정할 수 있습니다.
css와 같은 방식으로 js를 주입할 수도 있습니다.

  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "src/content/script.js"
      ]
    }
  ]
}

재미있는 부분(코딩)

manifest.json에서 본 것처럼 팝업은 간단한 html 페이지입니다.

우리의 경우 논리는 매우 간단합니다.

팝업은 컨트롤 패널이며 액션 버튼을 클릭하면 페이지를 변경하라는 메시지가 현재 탭의 내용으로 전송됩니다.
chrome.tabs.query()는 현재 탭을 가져오는 데 사용되고 chrome.tabs.sendMessage()는 메시지를 보내는 데 사용됩니다.
chrome 네임스페이스는 Firefox에서도 지원되므로 걱정하지 마십시오. Firefox 및 Edge의 경우 Promise와 같은 몇 가지 이점이 있는 browser 네임스페이스를 사용할 수도 있습니다.

예: 글꼴 증가 버튼을 클릭하면 개체{action: 'font-size-increase'}가 현재 탭에 메시지로 전송되고 콘텐츠 스크립트가 메시지를 수신하고 적절한 작업을 수행합니다.


chrome.runtime.onMessage.addListener()를 사용하는 콘텐츠 스크립트에서 메시지를 들을 수 있습니다.

여기에서 글꼴 크기를 늘리라는 메시지가 처리되는 방식을 볼 수 있습니다.

chrome.runtime.onMessage.addListener(msg => {
    if (msg.action === "font-size-decrease") {
        changeFontSize(-1);
    }
    if (msg.action === "font-size-increase") {
        changeFontSize(1);
    }
});

function changeFontSize(change) {
    let elements = document.querySelectorAll("*");
    let newFontSizes = [];
    for (let x = 0; x < elements.length; x++) {
        newFontSizes.push((parseFloat(window.getComputedStyle(elements[x]).getPropertyValue('font-size')) + change) + 'px');
    }
    for (let x = 0; x < elements.length; x++) {
        elements[x].style.fontSize = newFontSizes[x];
    }
}

결과

소스 코드

현재 이 확장 프로그램에는 글꼴 크기, 회색조, 색상 반전의 3가지 도구가 있습니다.

기여하고 더 많은 도구를 추가할 수 있습니다 :)

chr314 / 접근성 확장

접근성 도우미 브라우저 확장 프로그램

이것은 다음을 위해 만들어졌습니다.
시각 장애가 있거나 기타 조건이 있는 사용자가 웹을 더 쉽게 검색할 수 있도록 도와주는 브라우저 확장 프로그램입니다.
이 확장 기능에는 사용자가 글꼴 크기, 색상 등을 변경할 수 있는 기능을 제공하는 도구가 있습니다.



View on GitHub