리소스 재정의

이 게시물에서는 브라우저 확장Resource Override에 대한 간략한 개요를 제공하려고 합니다.

무엇을 위한 것입니까?



지정된 사이트의 스타일을 자신의 스타일로 대체합니다.

왜요?



prod 사이트에서 css 및 js를 디버그합니다.

설치.



링크를 클릭하고 설치 버튼을 클릭하십시오.

세부





설정 페이지에서 사용할 수 있는 네 가지 작업이 있습니다.
  • URL을 통해 파일을 다른 파일로 바꾸십시오.
  • 파일을 통해 파일을 다른 파일로 바꾸십시오.
  • 자신의 파일을 삽입하십시오.
  • 헤더를 교체합니다.

  • 나는 마지막 것을 사용하지 않았으므로 처음 세 가지에 대해 말씀 드리겠습니다.

    URL을 통해



    로컬에서 개발 중이라고 가정해 보겠습니다. 서버를 선택하는 빌더가 설정되어 있습니다.
    URL은 다음과 같이 표시됩니다 - localhost:3000 .

    스타일은 하나의 번들styles.min.css로 컴파일되며 전투 현장에서도 사용됩니다. 이것은 새로운 스타일이 제품에서 어떻게 보일지 볼 수 있음을 의미합니다.

    이렇게 하려면 그룹에 새 규칙을 추가하기만 하면 됩니다. URL → URL
    from 필드에서 스타일을 대체할 사이트를 지정하고 to 필드에서 스타일의 위치를 ​​지정합니다.

    https://site.com/styles.min.css → localhost:3000/styles.min.css
    


    파일을 통해



    이전 방법과 유사하게 locahost:3000/styles.min.css 대신 확장의 내장 텍스트 편집기에 코드를 삽입해야 합니다. 이것은 작은 파일에만 유용합니다.

    파일 삽입



    이미 URL 바인딩이 없습니다.
    Chrome 확장 프로그램을 작성하기에 너무 게으른 경우 JS 코드를 붙여넣기만 하면 됩니다.

    이것이 관심이 있고 확장에 대해 더 알고 싶다면 video by Kyle Paulsen을 시청하는 것이 좋습니다.

    좋은 웹페이지 즐겨찾기