크롬 확장을 사용하여로드 된 페이지의 HTML 수정

크롬 확장을 사용하여로드 된 페이지의 HTML 수정

---

페이지 제목에 특정 텍스트가 포함 된 경우로드 된 페이지에 HTML 코드를 추가해야 할 필요가 있습니까?

Chrome 확장 프로그램은 저에게 새로운 근거이며 도움을 주시면 감사하겠습니다.

---

참조 :

• 콘텐츠 펼쳐
• 매니페스트 파일

일부 HTML 코드를 추가하기위한 참조로 다음 코드를 사용할 수 있습니다.

manifest.json

이 파일은 컨텐츠를 신뢰에 등록합니다.

{
"name":"Inject DOM",
"description":"http://stackoverflow.com/questions/14068879",
"version":"1",
"manifest_version":2,
"content_scripts": [
    {
      "matches": ["http://www.google.co.in/*","https://www.google.co.in/*"],
      "js": ["myscript.js"]
    }
  ]
}

myscript.js

Google페이지에 버튼을 추가하기위한 간단한 펼쳐보기

// Checking page title
if (document.title.indexOf("Google") != -1) {
    //Creating Elements
    var btn = document.createElement("BUTTON")
    var t = document.createTextNode("CLICK ME");
    btn.appendChild(t);
    //Appending to DOM 
    document.body.appendChild(btn);
}

Output

원하는 페이지에 추가 된 버튼이 시청합니다.

---

@Sudarshan의 답변은 페이지 특이성, 그레이트에 대해 설명하지만 추가 된 댓글은 어떻습니까? 다음은 기존 콘텐츠를 수정하거나 페이지에서 콘텐츠를 만드는 가장 쉬운 방법으로 그가 놓친 것을보다 실용적인 방법으로 수행하는 방법입니다.

수정

단일 항목 수정 :

document.getElementById("Id").innerHtml = this.innerHtml + "<some code here>";

또는 속성을 수정 비용 :

document.getElementById("Id").class = "classname";

//or ->

document.getElementById("Id").style.color = "#a1b2c3";

여러 줄의 코드를 추가 비용으로 수행하십시오.

document.getElementById("Id").innerHtml = this.innerHtml + `
 <some code here>                                                            <!-- Line 1 -->
 and we're on multiple lines!` + "variables can be inserted too!" + `        <!-- Line 2 -->
 <this code will be inserted directly **AS IS** into the DOM                 <!-- Line 3 -->
`
;

• 이제 쉬운 요소 삽입은 어떻습니까?

창조하다

큰 코드 삽입 ( 오래된 코딩 프로젝트의 예) insertAdjacentHtml API 참조 :

var bod = document.getElementsByTagName('body')[0];

bod.insertAdjacentHTML('afterbegin', `
    <div class="Boingy" id="Boingy">
        <div class="Boihead" id="BoiHead">
            <div class="deXBox" id="deXBox">
                <div class="Tr-Bl_Button" style="height: 25px;width: 2px;margin-left: 11.65px;background-color: gray;transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);Z-index: 1;">
                    <div class="Tl-Br_Button" style="height: 25px;width: 2px;background-color: gray;transform: rotate(90deg);-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);Z-index: 2;">
                        </div>
                    </div>
                </div>
            </div>
            <embed id="IframeThingyA" src="` + "url" + `" type="text/html">
            </embed>
        </div>
    `);

참조 :

• 삽입-인접 -Html
• 콘텐츠 특정 코드

참고 URL : https://stackoverflow.com/questions/14068879/modify-html-of-loaded-pages-using-chrome-extensions