크롬 확장 기능 만들어 보기

이 글도 다른 기사와 마찬가지로 Qita에 투고해 보았다
평소에 사용하던 브라우저를 자유롭게 사용자 정의할 수 있다면 매우 편리할 것이다
허브 JS 경험이 많은 분들이 뭘 할 수 있을까.
세상의 제품으로 쉽게 내놓을 수 있는 게 없을까
조사 결과를 검토해보니 "크롬 확장 기능을 만들어 보는 게 좋다"는 결론이 나와 일단 간단한 것부터 만들고 방법을 잡기로 했다

TL;DR

간단한 크롬 확장 기능 만들기
자기 자리에만 읽어봐.
이러한 학습을 통한 실현 방법

조건 정의

확장 기능에 관해서는 백그라운드 등 다양한 파일이 필요하지만 기본적으로manifest.json(버전번호, 크롬에 알림 구조 등)와 content.js(기술 기능) 두 개만 있으면 충분하다
이번'쉽게 만들기'때문에 URL만 보고 돌려주면 돼요
"열려 있는 페이지의 URLhttp://=SSL이 지원되지 않으면 팝업하고 경고합니다."
쉬운 것만 하기로 했어요.

설계

매우 간단하기 때문에 내부와 외부의 디자인이 없다location.protocol 프로토콜 정보(http:/, https:///) 획득 가능

if(location.protcol === "http:") alert("警告で表示する内容");

코드에 관해서는 이 정도면 충분하다고 생각합니다.
그러나 이후 제작manifest.json할 때 모바일 페이지의 URL 형식(후술, "content scripts"의 "maches")을 설정할 수 있다는 것을 알게 되었고 http:의 페이지에서만 이동하면 이if문이 필요하지 않고 후술한 것처럼 상당히 간단한 형식이 된다는 것을 알게 되었다.
그리고 manifest.json에서는 기본적으로 템플릿에 따라 설명하면 되기 때문에 실제 코드를 써야 한다

창설

결과는 다음과 같은 형식으로 기술되었다
content.js

(function (window, document) {
  alert("Here is not HTTPS!");
}) (window, document);

(즉시 함수로 삼는 것은 자신의 취미이다)
manifest.json

{
  "name": "httpAlert",  //拡張機能の名前
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Notice alert in not https pages.",  //拡張機能の説明
  "content_scripts": [{  //動作対象ページ指定したいときとか
    "matches": ["http://*/"],  //動作対象ページのURL書式
    "js": [
      "content.js"  //動かしたいJSファイル
    ]
  }]
}

댓글이 없는 부분은 기본적으로 이렇게 하면 된다(버전 번호이기 때문에 앞으로 당연히 바뀔 가능성이 있다)
여기에는 URL을 통해 동작 대상 페이지를 지정할 수 있기 때문에 SSL 페이지가 아닌 페이지만 사용하면 content.js의if문이 필요하지 않습니다

테스트 실현

단일 테스트(테스트 코드에 문제가 없음)는 크롬 개발자 도구가 완성한 것이니 가능한 한 빨리 실현해 주십시오.

확장 관리에서 패키지 없는 확장 읽기 를 선택하고 대상 폴더로 작성된 확장 폴더를 선택합니다.
그러나

여기서 오류 발생
"선언 파일을 찾거나 읽을 수 없습니다."폴더의 구성은 다음과 같습니다.

httpAlert
└ src
   ├ manifest.json
   └ content.js

실수로 폴더를 만들고 그 아래에 각 파일을 놓아 선언 파일을 읽을 수 없음("http Alert"폴더를 선택하여 읽을 수 있음)

httpAlert
├ manifest.json
├ content.js
└ src

상기 변경 폴더 구조를 통해 대응 완료(src 폴더는 비어 있고 저장할 뜻이 없음)
그러나 이 상태에서도 오류가 발생했다

이번엔 "선언문 못 읽어(찾았지만)"
파일 형식이 틀렸는지 확인하고 기술을 다시 보십시오. "matches"는 아래와 같습니다

"matches": ["http://*"],

마지막에 src가 없으면 matches의 기술로는 적합하지 않은 것 같아요.
앞에서 말한 기술(완성판)처럼 마지막에 /까지 더하면 잘 읽고 추가할 수 있다.

너무 좋아요.
실제 확인 후 SSL이 비대응 페이지에서 실행되고 있음을 알 수 있다

자주 기준으로 사용되는 어떤 선생의 페이지는 http://로 시작하여 확인에 사용된다
이것은 설치된 것이다!

배우다

· 한마디로 /와 manifest.json가 있다면 확장 기능을 제작할 수 있다
· content.js 대체적으로 정형화도 OK(용도에 따라), matches의 URL은 마지막에 필요manifest.json・/ 폴더 바로 아래
• manifest.json에 동작 쓰기
근방
특별히 방해되는 건 없으니까 그냥 계속 넣어둬
크롬이 비 SSL 페이지에 경고한 지 2-3년이 지났는데 가끔 이 Alert가 나타나서'아, 이 SSL이 맞지 않나'(TTFC 같은)
우선 나는 방법을 알았고, 다음은 (이렇게도) 상점에 진열되어 있으니, 좀 더 복잡한 것을 만들어 보아라.