크롬 확장을 사용하여 특정 웹 사이트의 텍스트 스타일을 변경하십시오.

Question

크롬 웹 사이트 www.twitch.tv의 크롬 확장 프로그램을 만들려고합니다. 채팅 중이며 내 이름의 색상을 변경하려고합니다. .

아래 이미지를 참조하십시오. (왼쪽)에서, (오른쪽)에 :

나는 content_script 내의 manifest.json 파일이 있습니다.

그래서 특정 사이트의 "nickeaules"라는 이름을 다른 색상으로 변경하고 싶습니다. 이전에 Chrome 확장 프로그램을 만들지 않았으므로이 기능을 사용하지 않아도됩니다.

몇 가지 간단한 코드로 가능합니까? 아니면 코드 작성이 복잡합니까?

Answer 1

콘텐츠 스크립트를 사용할 수 있습니다. 당신의 특별한 경우에, 그것은 꽤 간단합니다. 콘텐츠 스크립트 (실제로 CSS 파일 만 사용할 수 있음)는 지정된 웹 페이지에서 실행되는 파일입니다. 콘텐츠 스크립트에서 정확히 수행해야하는 작업은 채팅 웹 페이지의 구조에 따라 다릅니다. CSS 파일을 사용하여 원하는 스타일을 삽입 할 수 있으며 페이지를 표시하는 요소를 인식하고 color을 red으로 변경하면됩니다. stackoverflow (https://stackoverflow.com/) 시작 페이지의 "Top Questions"레이블을 빨간색으로 만드는 간단한 확장 기능을 만들었습니다. 나는 그 본문 (h-top-questions)으로 그 본문을 식별합니다. 채팅 페이지 코드를 분석하고 거기에서 이름 라벨을 찾고 동일한 작업을 수행 할 수 있습니다. 즉 당신을위한 템플릿 수 :

의 manifest.json :

{ 
    "name": "Top Questions redder", 
    "description": "Make the world red", 
    "version": "1.0", 
    "content_scripts": [ 
    { 
     "matches": ["https://stackoverflow.com/"], 
     "css": ["sheet.css"] 
    } 
    ], 
    "manifest_version": 2 
} 

sheet.css :

#h-top-questions { 
    color: red; 
}