사용자 스크립트로 사이트 개조

10720 단어 tampermonkeyJavaScript

사용자 스크립트로 사이트 개조


개시하다


사용자 스크립트는 자신의 브라우저에 미리 설정된 JavaScript입니다.특정 주소를 방문할 때 발생하는 스크립트를 설정하면 다른 사람이 만든 사이트를 자신의 페이지로 바꿀 수 있다.
번거로운 표를 입력하는 순간 자동 입력 버튼을 입력할 수도 있고, 대량의 글이 없는 상황에서 글을 여러 페이지로 나누는 뉴스 사이트에서 글을 한 페이지에 모두 결합시킬 수도 있다.
이것은 자신의 브라우저에 설정된 스크립트일 뿐 다른 사람들이 같은 사이트를 방문할 때 일반적인 사이트를 표시한다.
사용자 스크립트는 브라우저에 표시된 웹 페이지에서 실행되기 때문에 로그인할 필요가 없습니다.API를 호출할 필요가 없으므로 개발자를 등록할 필요도 없습니다.로그인한 페이지에 스크립트를 설정하고 쿠키를 보내면 됩니다.
반면 교차 사냥꾼자리의 제약을 받는다.사용자 스크립트를 위해 교차 사냥꾼자리를 편리하게 허가하지 않기 때문에 서로 다른 사냥꾼자리를 방문할 수 없다.다만, 최초의 용도로 보면 충분하다.
또한 사용자 스크립트는 자신의 브라우저로 조작할 수 있기 때문에 낡은 브라우저와의 호환성에 신경 쓸 필요가 없다.자신의 브라우저에 대응하는 부분인class,fetch,async/await는 모두 마음대로 사용할 수 있다.바벨이랑 폴리필 안 써도 돼.

Tampermonkey 가져오기


사용자 스크립트를 실행하기 위해 여러 개의 브라우저가 확장되었지만, 나는 Tampermonkey를 사용했다.Tampermonkey는 Firefox 버전, 크롬 버전, 엣지 버전이 있다.
또한 Firefox를 사용하고, 다음에 기록된 스크립트는 Firefox로 조작합니다.Edge는 구문 오류로, Chrome이 처음 표시되기 전에 이미 확인했습니다.

404페이지에서 스크립트 설정


기본적으로 사용자 스크립트는 기존 페이지의 용도를 약간 바꾸지만 대개조를 하려면 원래의 기능을 방해하지 않기 위해 적당한 404페이지로 설정한다.그리고 원래의 내용을 버리고 스스로 DOM을 재구성한다.
우선, 이때의 코드는 다음과 같다.여기에'익명 일기'특정 404페이지를 방문해 내용을 모두 삭제했다.다만, 머리글이 탐날 때도 있어서 남겨뒀어요.#app 아래에 라벨을 추가하려고 합니다.
// ==UserScript==
// @name         カスタマイズ版匿名日記
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @require      https://cdn.jsdelivr.net/npm/vue
// @require      http://localhost/files/js/dayjs.min.js
// @match        https://anond.hatelabo.jp/customized
// @grant        none
// ==/UserScript==

class AnonymousDiary {
  constructor() {
    const original = document.createElement('div');
    document.body.appendChild(original);
    original.id = 'original';

    const app = document.createElement('div');
    document.body.appendChild(app);
    app.id = 'app';

    Array.apply(null, document.body.childNodes)
      .filter(child => child.id != 'original' && child.id != 'app')
      .forEach(child => {original.appendChild(child);});

    const queryForHide = '#hatena-anond, #original > p, #original > h1';
    Array.apply(null, document.querySelectorAll(queryForHide)).forEach(node => {
      node.style = 'display:none'
    });
  }
}

new AnonymousDiary();

라이브러리 추가


JavaScript를 추가하는 라이브러리는 파일의 시작 부분에 @require 행만 추가하면 됩니다.
// @require      https://cdn.jsdelivr.net/npm/vue
// @require      http://localhost/files/js/dayjs.min.js
나는 스타일시트에 더 적합한 추가 방법이 있는지 모르겠지만, 나는 동적으로 <style> 라벨을 추가할 것이다.
const head = document.getElementsByTagName('head')[0];

const styleLink = document.createElement('link');
head.appendChild(styleLink);
styleLink.setAttribute('rel', 'stylesheet');
styleLink.setAttribute('type', 'text/css');
styleLink.setAttribute('href', 'https://bootswatch.com/4/litera/bootstrap.min.css');

fetch에서 본래의 페이지를 얻다


여기에는 설명이 적지만 아래 코드를 실행하면 원래 내용의 DOM을 얻을 수 있기 때문에 404페이지에 자신의 내용을 만들 수 있다.
class AnonymousDiary {
  async getItems({page}) {
    const response = await fetch('https://anond.hatelabo.jp/?mode=top&page=' + page);
    const html = await response.text();
    const dom = new DOMParser().parseFromString(html, "text/html");

    // dom.bodyで<body>を取得できるのでなんやかんや実行する;
  }
}
new AnonymousDiary().getItems({page: 1});

캡처


위의 후속 단계를 GiitHub 의 웨어하우스에 설치합니다.
이 창고UserScript.js를 Tampermonkey에 추가하고 실험실에 로그인한 상태https://anond.hatelabo.jp/customized에서 방문하면 아래 캡처가 됩니다.
위에는 개조판, 아래는 통상적인 끝의 익명 일기.

다시 비교해 보면 낡은 곳으로 5페이지를 이동하는 링크를 추가하면 될 것 같다.
리액트 아이템의 개념을 설명했습니다.
Facebook에 있는 콘솔 성대모사.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage