[javascript] 사용자에게 Chrome 확장 프로그램이 설치되어 있는지 확인


Answers

이제 Chrome에서 웹 사이트의 메시지를 내선 번호로 보낼 수 있습니다.

따라서 background.js 확장 (content.js는 작동하지 않습니다)에서 다음과 같이 추가하십시오 :

chrome.runtime.onMessageExternal.addListener(
    function(request, sender, sendResponse) {
        if (request) {
            if (request.message) {
                if (request.message == "version") {
                    sendResponse({version: 1.0});
                }
            }
        }
        return true;
    });

그러면 웹 사이트에서 전화를 걸 수 있습니다.

var hasExtension = false;

chrome.runtime.sendMessage(extensionId, { message: "version" },
    function (reply) {
        if (reply) {
            if (reply.version) {
                if (reply.version >= requiredVersion) {
                    hasExtension = true;
                }
            }
        }
        else {
          hasExtension = false;
        }
    });

그런 다음 hasExtension 변수를 확인할 수 있습니다. 유일한 단점은 호출이 비동기 적이므로 어떻게 든 처리해야한다는 것입니다.

편집 : 아래에서 언급했듯이, addon에 메시지를 보낼 수있는 도메인을 나열하는 manifest.json에 항목을 추가해야합니다. 예 :

"externally_connectable": {
    "matches": ["*://localhost/*", "*://your.domain.com/*"]
},
Question

Chrome 확장 프로그램을 구축하는 중입니다. 모든 기능을 원하는대로 작동하려면 사용자가 내 확장 프로그램을 설치했는지 감지 할 수있는 외부 JavaScript 스크립트가 필요합니다.

예 : 사용자가 내 플러그인을 설치 한 다음 내 스크립트가있는 웹 사이트로 이동합니다. 웹 사이트에서 내 확장 프로그램이 설치되어 있는지 확인하고 그에 따라 페이지를 업데이트합니다.

이것이 가능한가?




나는 이것에 대한 나의 연구를 공유 할 것이라고 생각했다. 특정 파일 확장자가 설치되어 있는지 감지 할 수 있어야합니다 : /// 링크가 작동합니다. 나는이 기사를 blog.kotowicz.net/2012/02/intro-to-chrome-addons-hacking.html 에서 보았다. 이것은 확장의 manifest.json을 얻는 방법을 설명했다.

코드를 조금 수정하고 다음과 같이 수정했습니다.

   function Ext_Detect_NotInstalled(ExtName,ExtID) {
   console.log(ExtName + ' Not Installed');
   if (divAnnounce.innerHTML  != '')
   divAnnounce.innerHTML = divAnnounce.innerHTML + "<BR>"

   divAnnounce.innerHTML = divAnnounce.innerHTML + 'Page needs ' + ExtName + ' Extension -- to intall the LocalLinks extension click <a href="https://chrome.google.com/webstore/detail/locallinks/' + ExtID +'">here</a>';
  }

  function Ext_Detect_Installed(ExtName,ExtID) {
    console.log(ExtName + ' Installed');
  }

  var Ext_Detect = function(ExtName,ExtID) {
    var s = document.createElement('script');
    s.onload = function(){Ext_Detect_Installed(ExtName,ExtID);};
    s.onerror = function(){Ext_Detect_NotInstalled(ExtName,ExtID);};
    s.src = 'chrome-extension://' + ExtID + '/manifest.json';
    document.body.appendChild(s);
  }

 var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

 if (is_chrome==true)
 {
  window.onload = function() { Ext_Detect('LocalLinks','jllpkdkcdjndhggodimiphkghogcpida');};
 }

이렇게하면 Ext_Detect (ExtensionName, ExtensionID)를 사용하여 여러 개의 확장 설치를 감지 할 수 있습니다.




Chrome 확장 프로그램을 제어 할 수 있다면 내가 한 일을 시도해 볼 수 있습니다.

// Inside Chrome extension
var div = document.createElement('div');
div.setAttribute('id', 'myapp-extension-installed-div');
document.getElementsByTagName('body')[0].appendChild(div);

그리고:

// On web page that needs to detect extension
if ($('#myapp-extension-installed-div').length) {

}

조금 해킹 된 느낌이지만 다른 방법을 사용할 수 없으며 여기에서 Chrome이 API를 변경하는 것에 대해 걱정합니다. 이 방법이 곧 작동하지 않을지는 의문입니다.




웹 페이지는 배경 스크립트를 통해 확장 기능과 상호 작용합니다.

manifest.json :

"background": {
    "scripts": ["background.js"],
    "persistent": true
},
"externally_connectable": {
    "matches": ["*://(domain.ext)/*"]
},

background.js:
chrome.runtime.onMessageExternal.addListener(function(msg, sender, sendResponse) {
    if ((msg.action == "id") && (msg.value == id))
    {
        sendResponse({id : id});
    }
});

page.html :

<script>
var id = "some_ext_id";
chrome.runtime.sendMessage(id, {action: "id", value : id}, function(response) {
    if(response && (response.id == id)) //extension installed
    {
        console.log(response);
    }
    else //extension not installed
    {
        console.log("Please consider installig extension");
    }

});
</script>



쿠키 방법을 사용했습니다.

내 manifest.js 파일에는 내 사이트에서만 실행되는 콘텐츠 스크립트가 포함되어 있습니다.

 "content_scripts": [
        {
        "matches": [
            "*://*.mysite.co/*"
            ],
        "js": ["js/mysite.js"],
        "run_at": "document_idle"
        }
    ], 

내 js / mysite.js에서 나는 한 줄을 가지고있다 :

document.cookie = "extension_downloaded=True";

내 index.html 페이지에서 쿠키를 찾습니다.

if (document.cookie.indexOf('extension_downloaded') != -1){
    document.getElementById('install-btn').style.display = 'none';
}



확장 프로그램 에서 쿠키를 설정하고 웹 사이트에서 JavaScript가 있는지 확인하여 쿠키가 있는지 확인하고 그에 따라 업데이트 할 수 있습니다. 여기에 언급 된이 방법과 아마 대부분의 다른 방법은 타임 스탬프 등에 따라 사용자 지정 쿠키를 만들려고 시도 하지 않는 한 사용자가 cirvumvented 할 수 있습니다. 응용 프로그램에서 서버 측을 분석하여 실제로 사용자가 있는지 확인하십시오. 확장 또는 그의 쿠키를 수정하여 그것을 가지고있는 누군가.




Related