Safari Extension : 툴바 버튼을 클릭 한 후에 만 ​​컨텐츠 스크립트를 삽입하는 방법은 무엇입니까?

Question

내 확장 프로그램에서 도구 모음 아이콘을 클릭 할 때 작업을 수행해야합니다. 그러나 많은 스크립트와 스타일 시트가 포함되어 있으므로 사용자가 방문하는 모든 페이지에 항상로드되어 브라우저가 느려지므로 일반 "콘텐트 스크립트"는 사용하지 않는 것이 좋습니다. 대신 버튼을 클릭 한 후에 만 ​​스크립트를 삽입하려고합니다. 이 명령을해야하는 경우

이

이 [즉, 도구 모음 단추를 클릭]가 주입 된 스크립트에서 작업을 시작하기 위해, 글로벌 HTML 페이지 또는의 명령에 응답 :

워드 프로세서는 다음과 같은 말 확장 바를 클릭하고 스크립트에 메시지를 보냅니다. , 당신은 당신이 Safari에서 그것을 어떻게 tabs.activeTab.attach()

을 사용할 수 있습니다

크롬에서 파이어 폭스에서 chrome.tabs.executeScript()

를 사용할 수 있습니까?

Answer 1

당신은 조건부 페이지에 내용을 삽입하는 다음 네 가지 방법을 사용할 수 있습니다

safari.extension.addContentScript 
safari.extension.addContentScriptFromURL 
safari.extension.addContentStyleSheet 
safari.extension.addContentStyleSheetFromURL 

Documentation here합니다.

그러나, 이러한 방법 어떤 기존 탭 당신이 그들을 호출 할 때에 컨텐츠를 삽입하지 않습니다. 따라서 사용 사례에 적합하지 않을 수 있습니다. 이 방법 중 하나를 사용하여 탭을 다시로드 할 수는 있지만 사용자 환경이 좋지 않기 때문에 원하지 않을 수 있습니다.

대신 다음과 같은 기술을 사용해야 할 수도 있습니다. 모든 페이지에 주입되는 매우 가벼운 콘텐츠 스크립트를 만드십시오.이 스크립트는 확장 프로그램의 전체 페이지에서 메시지를 수신하고 삽입하려는 내용에 대해 <script> 및 <style> 또는 <link> 요소를 입력하십시오. 그런 다음 툴바 버튼을 클릭하면 글로벌 페이지가 콘텐츠 스크립트에 적절한 메시지를 전달하게하고 아마도 원하는 콘텐츠의 URL을 포함하게됩니다.

이 방법의 단점은 삽입 된 스크립트 (<script> 태그를 작성하여 추가 한 스크립트)가 전체 페이지 또는 확장의 다른 부분과 직접 통신 할 수 없다는 것입니다. 의사 소통이 필요할 경우 window.postMessage 또는 다른 기술을 사용하여 의사 소통을해야합니다.

여기에 최소한의 예가 나와 있습니다. 확장 프로그램에 "inject-content"명령을 실행하는 툴바 항목이 있다고 가정하십시오. 항상 주입 내용 스크립트에서

safari.application.addEventListener('command', function (evt) { 
    safari.application.activeBrowserWindow.activeTab.page.dispatchMessage(evt.command); 
}, false); 

: 글로벌 페이지에서

는 확장이에서 설치 한 웹 페이지를 변경할 수 없습니다처럼

safari.self.addEventListener('message', function (evt) { 
    if (evt.name == 'inject-content') { 
     var myScriptTag = document.createElement('script'); 
     myScriptTag.src = safari.extension.baseURI + 'my_script.js'; 
     document.body.appendChild(myScriptTag); 
    } 
}, false);