크롬 확장 프로그램이 DOM을 깨뜨림 DOM

페이지의 특정 텍스트를 새 텍스트 및 링크로 바꾸는 Chrome 확장 프로그램을 만들고 있습니다. 이렇게하려면 DOM을 깨뜨린 document.body.innerHTML을 사용하고 있습니다. 확장 프로그램이 활성화되면 codepen.io에서 YouTube 동영상 및 페이지로드가 중단되는 것 같습니다. 나는 매니 페스트에서 YouTube 및 codepen을 제외하고 아래 코드에서 필터링하여이를 수정하려고 시도했지만 작동하지 않는 것 같습니다.크롬 확장 프로그램이 DOM을 깨뜨림 DOM

누구나 document.body.innerHTML을 사용하거나 페이지로드가 중단 될 수있는 다른 문제를 코드에서 볼 수있는 대안을 제안 할 수 있습니까? 감사.

출처

2016-07-01 mostlynew

먼저 작동하지 않는 모든 사이트를 나열하면 전체 인터넷에 적합하지 않습니다. –

예, 알고 있습니다. 그래서 제가 도움을 청합니다. 그러나 매니 페스트 **에서 해당 사이트를 제외한 것으로 보입니다 **는 내가 알고있는 사이트에서만 작동해야하며 그렇지 않습니다. – mostlynew

이렇게하려면 innerHTML을 사용하는 것은 산탄 총을 사용하여 뇌 수술을하는 것과 같습니다. 물론 HTML이 유효하지 않을 수도 있습니다. 이 속도로 자바 스크립트를 사용하는 모든 웹 사이트를 허용 목록에 추가해야하는 번거 로움이 있습니다. 이는 분명히 실현 가능하지 않습니다.

정확한 방법은 innerHTML을 전혀 건드리지 않는 것입니다. 페이지에서 모든 DOM 노드 (firstChild, nextSibling 사용)를 반복적으로 반복하고 텍스트 노드에서 일치하는 항목을 찾으십시오. 하나를 찾으면 그 단일 노드 (replaceChild)를 링크 (createElement)로 바꾸고 남은 비트는 새로운 텍스트 노드 (createTextNode, appendChild, insertBefore)로 바꿉니다. 기본적으로

이 같은 노드에 대한보고 싶은 것 : 자바 스크립트 당신과 함께 콘텐츠를 생성 웹 사이트를 지원하려는 경우 또한

Text: this is 
Element: a href="..." 
    Text: replacement text 
Text: that should be linked

: 같은 노드로 교체 프로그램

Text: this is some text that should be linked

그리고 동적으로 삽입 된 콘텐츠에서도이 대체 프로세스를 실행해야합니다. MutationObserver은이를 수행하는 한 가지 방법이지만, 웹 사이트의 속도가 느려질 수 있음을 명심하십시오.

출처

2016-07-01 18:50:20

텍스트 노드에 html 링크를 삽입하는 방법은 무엇입니까? – mostlynew

@mostlynew : 텍스트 노드에 요소를 삽입 할 수는 없지만, 그 옆에 요소를 삽입하거나 요소로 바꿀 수 있습니다. 이것은 모두 DOM을 사용하여 완료되었습니다. 포인터로 일부 함수 이름을 넣었습니다. –

아하. 고맙습니다! – mostlynew

크롬 확장 프로그램이 DOM을 깨뜨림 DOM

답변

관련 문제