블록에 동기화 된 타사 스크립트를 삽입 할 수있는 Chrome 확장 프로그램 (document_start)을 가져올 수 없습니다.

MutationObserver을 사용하는 타사 <script>에 새로 추가 된 노드를 조건부로 변환하기 때문에 포함해야합니다. <head> 블록 내부.블록에 동기화 된 타사 스크립트를 삽입 할 수있는 Chrome 확장 프로그램 (document_start)을 가져올 수 없습니다.

내가 수동으로 웹 사이트의 소스를 업데이트하고 <head> 블록의 내부에 타사 <script>을 포함하는 경우 - 모든 것이 제대로 작동하고, 타사 <script>이 발생하는 모든 돌연변이를 관찰 할 수있다.

그러나, 나는 웹 사이트의 <head> 블록으로 타사 <script>를 주입하는 크롬 확장 프로그램을 사용하는 경우 - <script> 제대로 웹 사이트의 <head> 블록에 주입되는 제 3 자하지만, 아주 소수의 돌연변이를 관찰한다 , 비교적 말하기.

은 크롬> DevTools로> 네트워크 패널의 내 평가는 밝혀 그 타사 <script>시작의 '부하 <body> 블록의 내부 <img>, <script>, <etc> 요소에 속하는 요청의 다양한 수의 후 순서. 이 발견과 조금 더 많은 연구를 통해 크롬 이을 실제로 실행하는 것이 동적으로 주입 된 <script> 태그를 비동기 적으로로드한다는 사실을 확인할 수있었습니다.

다음은 관련 manifest.json 구성과 함께 제 3 자 <script>을 주입하려고 시도한 몇 가지 다른 방법을 사용하고 있습니다.

의 manifest.json

"content_scripts": [{ 
    "matches": ["*://*/*"], 
    "run_at": "document_start", 
    "js": ["head.content-script.js"] 
}]

head.content-script.js (시도 # 1)

document.write('<script async="false" src="//third-party-js.com/third-party.js"></script>');

head.content-script.js (시도 # 2)

var script = document.createElement('script'); 

script.async = false; 
script.src = ('//third-party-js.com/third-party.js'); 

document.documentElement.appendChild(script);

head.content-script.js (시도 # 3)

var script = document.createElement('script'), 
    code = '(' + function() { 
     document.write('<script src="//third-party-js.com/third-party.js"><\/scr' + 'ipt>'); 
    } + ')()'; 

script.textContent = code; 
(document.head || document.documentElement).appendChild(script); 
script.remove();

head.content-script.js (시도 # 4)

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     mutation.addedNodes.forEach(function(addedNode) { 
      if (addedNode.nodeName === 'HEAD') { 
       var script = document.createElement('script'); 

       script.async = false; 
       script.src = ('//third-party-js.com/third-party.js'); 

       addedNode.appendChild(script); 
      } 
     }); 
    }); 
}); 

observer.observe(document, { 
    'childList': true, 
    'subtree': true 
});

은 다른 사람이이 문제를 경험하고있다 ? 이렇게하는 것이 더 나은 방법이라면 제안에 대해서도 열려 있습니다. 심지어는 응답을 수정하는 동안 mitmproxy과 같은 것을 사용하기도합니다. Chrome 확장 프로그램의 주요 목표는 서드 파티 <script>을 포함하도록 웹 사이트의 소스를 수동으로 업데이트 한 것처럼 부드럽고 안정적인 페이지로드로 끝나는 것입니다.

출처

2016-10-19 Timothy Allyn Drake

Chrome은 원래 삽입되지 않은 콘텐츠를 대기열에 추가합니다. 아마도 '

블록에 동기화 된 타사 스크립트를 삽입 할 수있는 Chrome 확장 프로그램 (document_start)을 가져올 수 없습니다.

관련 문제