전제 지식

크롬 확장 프로그램: 크롬을 맞춤설정할 수 있는 기능
javascript : 확장자 js 웹 페이지 조작에 강한 프로그래밍 언어

할 일

처음으로 크롬 확장 프로그램을 만드는 사람들을위한
예를 들어, Qitta의 화려한 녹색을 회색으로 변경하기 위해 크롬 확장 기능을 만듭니다.

이번에는 스스로 사용하는 것만으로 공개 설정은 하지 않는다
정말 최소한의 설정

이것으로 Qiita 사용하고 있는 것이 확실히 들키지 않는다!!

google 확장 기능 색상 변경 (공개 됨)

흐름

자신의 PC에 파일 만들기

파일에 https://qitta.com/이 붙을 때 content.js를 실행하도록 설정 manifest.json

실행하고 싶은 문장을 쓴 content.js

크롬으로로드

파일 구성

src
 |- manifest.json
 |- content.js

파일 이름
해설


manifest.json
크롬 확장 프로그램 설정 파일

content.js
실행되는 js 파일

파일 설명 manifest.json

manifest.json

{
  "manifest_version": 2,
  "name": "qitta_color",
  "version": "1.0.0",
  "content_scripts": [{
    "matches": ["https://qiita.com/*"],
    "js": [
      "content.js"
    ]
  }]
}

이 파일은 Chrome에서 로드할 때 Google에서 지정한 파일입니다. 파일 이름을 다시 쓰지 말라. 또한 json 파일에 주석 처리 할 수 ​​없으므로주의 ()


단어
의미
어떻게 해야할까


manifest_version
이 파일의 버전
지금 2에서 좋다.

이름
확장 기능의 이름
좋아하게 결정해도 좋다

버전
확장 프로그램 버전
업데이트 할 때 증가, 처음에는 하나 좋다.

content_script
URL 지정 및 실행할 파일
와일드 카드를 사용하여 URL을 지정, js는 직접 만든 파일 이름 (이번에는 content.js)

파일 설명 content.js

content.js

window.onload = function() {
     document.getElementsByClassName('st-Header').item(0).style.backgroundColor = '#808080';
};

실행할 javascript 파일
굉장히 설명하기 때문에 그다지 참고하지 않는 것이 좋다.


단어
의미


window.onload
페이지가 로드될 때 실행

docoment.getE.....('st-Header')
st-Heder 및 class 선언된 것을 가져옵니다.

item(0)
얻은 첫 번째 참조

style
스타일

backgroundcolor
배경색 여기를 color로 하면 문자색이 바뀐다

#808080
회색 컬러 코드


이번에는 클래스 설정되어 있으면 색 변경이므로

Id 설정되어 있을 때는

document.getElementById('st-Header').style.backgroundColor = '#808080';

javascript는 chrome에서 오른쪽 클릭 검증 console로 할 수있다
HTML과 CSS의 구성도 볼 수 있습니다.
자세한 내용은 "chrome 검증"에서 google 검색

로딩 방법

URL에 이것을 넣는지 설정에서 확장 기능에 간다 (https를 붙이지 않으면 안되므로주의)chrome://extensions/


패키징되지 않은 확장 기능 로드를 눌러
src라는 폴더를 열면 추가됩니다.



이런 느낌



Qitta에 액세스하는 것은 무사히 회색입니다.
다른 곳을 더 바꾸고 싶다면 js의 파일에 추가하는 것이 좋다.

참고

htps : // 이 m/mds와 y/이고 ms/9866544에 37987337dc79
htps : // m / Ry b / ms / 32b2 a 7b879f21b3 에로 fc
좀 더 세세하게 만들고 싶다면 이 근처를 보는 것이 좋다고 생각합니다. 도움이되었습니다.