Chrome 확장 프로그램을 만들어 보았습니다.

제목대로 이번에는 Chrome 확장 기능을 만들고 싶다고 생각했기 때문에 만들어 보았습니다.

이번에 제작하는 것

DO IT! 삼촌을 웹 페이지의 이미지와 바꿔 표시합니다.

배경

웹페이지 이미지를 모두 내 얼굴로 만드는 Chrome 확장
위의 기사 찾기
Chrome 확장 기능 만들기의 처음이고, 어차피라면 재미있는 것이 좋다! !
그리고 DO IT! 아저씨가 지켜봐주면 작업 효율이 폭상하는 것 같은 생각이 들었기 때문입니다.

완성된 이미지

구현

구현 자체는 간단했습니다.

폴더 구성

app/ ─
     ├ images/
     │     ├ icons/
     │     │   ├ icon-16.png
     │     │   ├ icon-19.png
     │     │   ├ icon-38.png
     │     │   └ icon-128.png
     │     └ targetImage.png
     ├ scripts/
     │     └ script.js
     └  manifest.json

script.js

script.js

// サイト読み込みのあと画像を差し替え
window.onload = function () {
    images = document.querySelectorAll('img')
    images.forEach(function(element) {
        element.src = chrome.extension.getURL('images/targetImage.png')
        element.removeAttribute('srcset')
    })
}

manifest.json

참고 기사

Chrome 확장 프로그램 매니페스트 파일을 작성하는 방법

manifest.json

{
  "name": "DOIT!",
  "short_name": "DOIT!",
  "description": "This app make all images into my can do it",
  "version": "1.0.0",
  "manifest_version": 2,
  "icons": {
    "16": "images/icons/icon-16.png",
    "128": "images/icons/icon-128.png"
  },
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["scripts/script.js"]
    }],
  "browser_action": {
    "default_icon": {
      "19": "images/icons/icon-19.png",
      "38": "images/icons/icon-38.png"
    },
    "default_title": "This app make all images into can do it"
  },
  "web_accessible_resources": [
    "*.png"
  ]
}

web_accessible_resourcesweb_accessible_resources확장 프로그램에서 이미지를 웹페이지에서 사용할 수 있도록 합니다.
이 설명 없이 chrome.extension.getURL 에 이미지 파일이 표시되지 않았습니다.
패키지의 리소스에 기본적으로 액세스할 수 없기 때문에

동작 확인

Chrome 설정 화면에서 확장 프로그램 선택

화면 상단의 개발자 모드로 확인

패키징되지 않은 확장 기능을 포함하여 manifest.json이 들어 있는 폴더(app)를 선택

이제 만든 확장 프로그램을 확인할 수 있습니다.

결과!

이미지가 바뀌는 것이 너무 까다롭고 확장 기능을 끄면 작업 효율이 높아졌습니다! !
다음은 background로 화상을 하고 있는 녀석에도 대응해 갈까라고 생각합니다.

만든 코드