페이지가 렌더링되기 전에 사용자 스크립트에서 CSS 파일을 전환하려면 어떻게해야합니까?

특정 웹 사이트의 특정 CSS 파일을 전환하는 Chrome 용 사용자 스크립트를 작성하려고합니다.페이지가 렌더링되기 전에 사용자 스크립트에서 CSS 파일을 전환하려면 어떻게해야합니까?

CSS 파일을 다른 CSS 파일로 전환하는 부분이 정상적으로 작동하지만 문제는 페이지 렌더링 전에 문제가 발생한다는 것입니다. 이렇게하면 원본 레이아웃이 렌더링 된 다음 삽입 된 새 레이아웃으로 신속하게 대체 될 때 사이트가 매우 추악하게 깜박입니다.

나는 페이지가 렌더링되기 전에 내 사용자 스크립트를 실행하기 위해 @run_at document_start을 사용했지만 제대로 작동하지 않는 것 같습니다. 내가 볼 수있는 것에서는 from the official Chrome documentation이 지원되어야합니다.

// ==UserScript== 
// @name   name 
// @namespace  namespace 
// @version  0.1a 
// @description description 
// @include  http://example.com/* 
// @run_at document_start 
// ==/UserScript== 


var sheets = document.getElementsByTagName("link"); 

for (var i=0; i<sheets.length; ++i) { 
    if (sheets[i].href.indexOf('all.css') != -1) { 
     sheets[i].href = 'http://replacement.com/all.css'; 
    } 
}

내가 조금 더 조사하고 (어떤 이유로 스크립트가 개발자 도구에 처음에 표시되지 않은) 내 스크립트에 중단 점을 설정 관리 : 참고로

, 여기에 내 전체 스크립트입니다. 스크립트 시작 부분의 중단 점에서 멈 추면 사이트에는 이미 원래 테마가 완전히로드되어 있습니다. 따라서 @run_at document_start 지시어가 작동하지 않고 페이지가로드 된 후 스크립트가 실행되는 것으로 보입니다. 비록 이것이 왜 그런지 알 수는 없지만.

출처

2012-03-27 Mad Scientist

그 이유는 문서 렌더링을위한 사이클 창을 남겨 두는 css를 다운로드하기 위해 또 다른 비동기 왕복이 필요하기 때문일 수 있습니다. 잠재적 인 동기화 옵션으로 dataUri를 사용하여 새로운 CSS 컨텐츠를 제공 해보십시오. (이것은 당신이 미리 다운로드하고 캐시해야만합니다.) –

저의 경우에는 문제가되지 않는 것 같아요. 제 질문을 좀 더 자세히 업데이트했습니다. 필자의 경우에'@run_at document_start'가 작동하지 않는 이유로 내 스크립트가 적시에 실행되지 않는 것 같습니다. –

문서 시작시 코드를 시도했는데 예상대로 문서를 얻지 못했습니다. 문서가 DOM을 생성하지 않는다고 말하면서 예상대로 (그래서 링크가 될 수 없습니다). 볼 수있는 스타일 시트가 있지만 크로스 도메인 CSS 등으로 인해 콘텐츠 스크립트에서 액세스 할 수 없습니다. 당신은 그들에게 약간의 코드를 주입함으로써 얻을 수 있지만 그 페이지의 다른 도메인의 CSS 파일 (Reading documents CSS in Chrome Extension)을 얻을 수는 없을 것입니다.

CSS의 상점 파일과 onBeforeLoad 이벤트를 사용하여 그게 전부를 교환 할 수있는 다른 방법이 있습니다 ....

function doBeforeLoad(event){ 
    if ((event.srcElement.type=="text/css") && (event.srcElement.href.indexOf('all.css') != -1) && (event.srcElement.href != 'http://replacement.com/all.css')) { 
     event.srcElement.href = 'http://replacement.com/all.css'; 
    } 
} 

document.addEventListener('beforeload', doBeforeLoad , true);

은 및 콘텐츠 스크립트 문서의 시작 부분에 실행하는 것이 넣습니다.

출처

2012-03-27 19:35:45 PAEz

감사합니다. 사용자 스크립트를 사용하는 대신 확장 프로그램을 만들어야했지만, 페이지가로드되기 전에로드하는 사용자 스크립트는 작동하지 않는 것 같습니다. –

페이지가 렌더링되기 전에 사용자 스크립트에서 CSS 파일을 전환하려면 어떻게해야합니까?

답변

관련 문제