Gmail의 버튼 색상을 변경하는 Chrome 확장 프로그램을 작성하려면 어떻게해야하나요?

Question

확장 프로그램을 살펴본 후에 트릭을해야하는 작은 확장 프로그램을 만들었지 만 효과가없는 것 같습니다. 그 밖에 무엇이 필요한지 잘 모르겠습니다. 또는 Gmail이 특별한 페이지 일 수 있으며,로드 프로세스 중에 주입 된 스타일 시트를 버릴 수도 있습니다.

는 여기에 지금까지 한 작업은 다음과 같습니다

x.css :

/*html for extra specificty*/ 
/*this class is applied to the compose button*/ 
html .T-I-KE { 
    background-image: -webkit-linear-gradient(top,#555,#333); 
    background-image: linear-gradient(top,#555,#333) 
} 

의 manifest.json :

{ 
    "name": "A Compose Button as Dark as my Soul", 
    "version": "1.1", 
    "manifest_version": 2, 
    "description": "I’m so depressed.", 
    "content_scripts": [ 
    { 
     "matches": ["http://mail.google.com/*", "https://mail.google.com/*"], 
     "css": ["x.css"] 
    } 
    ] 
} 

거래는 무엇입니까?

Answer 1

우리는 확장을 위해 콘텐츠 스크립트를 사용하여 변경하려는 요소에 대한 페이지 (URL을 기반로 특정 사이트 만 검색)를 스캔합니다. 예를 들어 YouTube 댓글을 살펴보고 정서 분석 점수에 따라 색상을 변경합니다.

이러한 기술은 주어진 버튼에 클래스를 추가하고 그런 식으로 변경할 수 있습니다. 여기

이

if (location.href.indexOf('youtube.com') != -1) { 
    if (data.indexOf('neg') != -1) { 
     $('.comment-text:contains('+data.substring(4)+')').each(function(index) { 
      var active_el = $(this)[index]; 
      chrome.extension.sendRequest({id: "sense_color"}, function(local) { 
       active_el.style.color="#"+local; 
      }); 
      selectText($(this)[0]); 
     }); 
    } 

Answer 2

Gmail을하지 크롬 웹 스토어와 같은 '특별 페이지 "이라고 발췌, 당신은 CSS를 삽입 할 수 있습니다. 예를 들어, "표준 HTML"페이지를 체크 아웃하고 body { background-color: #f00; }과 같은 것을 시도해보십시오 - 작동합니다! 변경할 단추가 iframe을 canvas_frame 내부에 있음을

주, 나는 그 이유가 있다고 생각이 하나도 작동합니다 :

#canvas_frame { 
    width: 50%; 
} 

아마 대답을 "How to apply CSS to iFrame"도움이 될 수 있습니다하기 당신, 나는 약간 주위를 시도하고 아직 일할 수는 없지만, 아마도 이것은 올바른 방향으로 당신을 지적 할 것입니다.