조사 중 링크 끊어진 페이지나 삭제된 페이지를 너무 만나 좌절했기 때문에 chrome 확장 기능을 만드는 방법을 공부한 뒤에 404 페이지에 대항하는 확장 기능을 만들어 보았습니다.

github : htps : // 기주 b. 코 m / 무기 111 / 파게의 t-fu-un d에서 c와 r

만드는 방법

우선 manifest 파일을 작성해 갑니다.
완성은 ↓와 같습니다.

manifest.json

{
    "manifest_version": 2,
    "name": "404 DETECTOR",
    "description": "",
    "version": "1.0.0",
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*" ],
        "js": ["script.js"],
        "css": ["style.css"]
    }],
    "background": {
        "persistent": true,
        "scripts": ["background.js"]
    },
    "browser_action": {
        "default_title": "404 detector",
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "webNavigation",
        "background",
        "http://*/*",
        "https://*/*"
    ]
}

아래는 각 항목의 세부 사항입니다.


속성 이름

개요


manifest_version

매니페스트 버전

이름

확장 기능의 이름

description

확장 기능 설명

버전

확장 프로그램 버전

content_script
matches
스크립트를 로드할 페이지 지정

js
로드되는 javascript

css
로드되는 CSS

배경
persistent
영속화의 유무

scripts
백그라운드에서 로드되는 스크립트

browser_action
default_title
막대에 표시될 때의 이름

default_popup
막대 아이콘을 클릭하면 열리는 html

permissions

확장 프로그램에 부여하는 권한

당초 예정

처음에는 Google 검색결과 목록의 링크에 존재하지 않는 링크를 표시하려고 했습니다.

이런 식으로 content_script 에서 지정한 script.js 에서 링크 목록을 chrome.runtime.sendMessage 를 사용하여 background.js 로 보냈습니다.background.js 쪽에서 chrome.runtime.onMessage.addListener 로 설정해 두면 chrome.runtime.sendMessage 를 따를 수 있게 됩니다.

페이지의 존재 확인에 대해서는 XMLHttpRequest 에서 응답의 상태 코드를 보는 것으로 확인하려고 했습니다.

script.js

var atags = document.getElementsByTagName("a");
var hrefs = [];
for (let index = 0; index < atags.length; index++) {
  href = atags.item(index).href;
  chrome.runtime.sendMessage({href});
  hrefs.push(atags.item(index).href);
};

console.log("hello", hrefs);

background.js

const ping = (url) => {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = () =>{};

  xhr.open("GET", url, true);
  try {
    xhr.send(null);
  } catch (err) {
    console.log(err);
  }
}

chrome.runtime.onMessage.addListener(
  async function(request, sender, callback) {
    console.log(request);
    ping(request.href);
  }
);

결과

여기서 무슨 일이 있었는지,
익숙한 그 녀석이 나왔습니다.

"컴퓨터 네트워크에서 평소와 다른 트래픽이 감지되었습니다. 이 페이지는 요청이 로봇이 아닌 실제 사용자가 제출했는지 확인하는 것입니다."
그렇습니다. .

걸렸다.

처음 script.js에서 요청을 제출했는데,
CORB(Cross Origin Read Block)에서는 엉망이 되었습니다.

해결 방법

background.js 에서 요청을 보내는 것을 피할 수 있었습니다.

다른 제안

여기서 저희 옆의 링크에 무차별로 리퀘스트를 던지는 것은 그만두려고 생각해, 날아가는 링크에만 좁혔습니다.chrome.webNavigation.onCommitted.addListener 에서 webNavigation 의 onCommitted 를 데리러 했습니다.
webNavigation 참고 페이지

페이지의 존재를 확인하는 것은 원래의 제안과 같은 방법을 취했습니다.
스테이터스 코드가 404 이었을 경우는 tabId 를 지정해 goBack 메소드를 호출하는 것으로 브라우저 백 시키고 있습니다.

url은 urlMacthes 에서 http 또는 https (일반 페이지 ..?)만 주워야했습니다. 이것은, chrome://settings 나 chrome://extensions 와 같은 특별히 주워야 할 것 같은 페이지를 제외하고 싶었기 때문입니다.

script.js

const ping = (url) => {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = () =>{};

  xhr.open("GET", url, false);
  try {
    xhr.onload = function () {}
    xhr.send();
    return xhr.status;
  } catch (err) {
    console.error(err);
  }
}

chrome.webNavigation.onCommitted.addListener((details) => {
  if (details.frameId !== 0){
    return;
  }
  const status = ping(details.url);
  console.log(status);
  if(status === 404) {
    chrome.tabs.goBack(details.tabId);
  }
}, {url: [{urlMatches: "http://*/*"}, {urlMatches: "https://*/*"}]});

동작은 이런 느낌입니다.
존재하지 않는 페이지로 날려고 하면 강제로 브라우저백됩니다.

이제 키보드를 깨는 걱정도 없습니다.