ตรวจสอบว่าผู้ใช้ติดตั้งส่วนขยาย Chrome หรือไม่

ฉันอยู่ในขั้นตอนการสร้างส่วนขยาย Chrome และเพื่อให้ทุกอย่างทำงานได้ตามที่ฉันต้องการฉันต้องการสคริปต์ JavaScript ภายนอกเพื่อให้สามารถตรวจจับได้ว่าผู้ใช้ติดตั้งส่วนขยายของฉันหรือไม่

ตัวอย่างเช่น: ผู้ใช้ติดตั้งปลั๊กอินของฉันจากนั้นไปที่เว็บไซต์ที่มีสคริปต์ของฉันอยู่ เว็บไซต์ตรวจพบว่าส่วนขยายของฉันได้รับการติดตั้งและอัปเดตหน้าตามนั้น

เป็นไปได้หรือไม่

ฉันแน่ใจว่ามีวิธีโดยตรง (เรียกใช้ฟังก์ชันในส่วนขยายของคุณโดยตรงหรือโดยใช้คลาส JS สำหรับส่วนขยาย) แต่เป็นวิธีทางอ้อม (จนกว่าจะมีสิ่งที่ดีกว่าเข้ามา):

ให้ส่วนขยาย Chrome ของคุณมองหา DIV ที่เฉพาะเจาะจงหรือองค์ประกอบอื่น ๆ บนหน้าของคุณด้วยรหัสที่เฉพาะเจาะจงมาก

ตัวอย่างเช่น:

<div id="ExtensionCheck_JamesEggersAwesomeExtension"></div>

ทำgetElementByIdและตั้งค่าเป็นinnerHTMLหมายเลขเวอร์ชันของส่วนขยายหรือบางอย่าง จากนั้นคุณสามารถอ่านเนื้อหาของฝั่งไคลเอ็นต์นั้นได้

อีกครั้งคุณควรใช้วิธีการโดยตรงหากมี

EDIT: พบวิธีตรง !!

ใช้วิธีการเชื่อมต่อที่พบที่นี่: https://developer.chrome.com/extensions/extension#global-events

ยังไม่ทดสอบ แต่คุณควรจะทำได้ ...

var myPort=chrome.extension.connect('yourextensionid_qwerqweroijwefoijwef', some_object_to_send_on_connect);

ตอนนี้ 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 ข้อเสียเปรียบเพียงอย่างเดียวคือการโทรเป็นแบบอะซิงโครนัสดังนั้นคุณต้องหลีกเลี่ยงปัญหานั้น

แก้ไข: ดังที่กล่าวไว้ด้านล่างคุณจะต้องเพิ่มรายการไปยังmanifest.json ซึ่งแสดงรายการโดเมนที่สามารถส่งข้อความถึงส่วนเสริมของคุณได้ เช่น:

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

อีกวิธีหนึ่งคือการเปิดเผยแหล่งข้อมูลที่สามารถเข้าถึงได้บนเว็บแม้ว่าวิธีนี้จะช่วยให้เว็บไซต์ใด ๆ ทดสอบว่ามีการติดตั้งส่วนขยายของคุณหรือไม่

สมมติว่า ID ส่วนขยายของคุณคือaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaและคุณเพิ่มไฟล์ (เช่นภาพพิกเซลโปร่งใส) เช่นเดียวกับtest.pngในไฟล์ของส่วนขยายของคุณ

จากนั้นคุณแสดงไฟล์นี้ในหน้าเว็บด้วยweb_accessible_resourcesmanifest key:

  "web_accessible_resources": [
    "test.png"
  ],

ในหน้าเว็บของคุณคุณสามารถลองโหลดไฟล์นี้โดยใช้ URL แบบเต็ม (ใน<img>แท็กผ่าน XHR หรือด้วยวิธีอื่นใด):

chrome-extension://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/test.png

หากไฟล์โหลดแสดงว่ามีการติดตั้งส่วนขยาย หากเกิดข้อผิดพลาดขณะโหลดไฟล์แสดงว่าไม่ได้ติดตั้งส่วนขยายนี้

// Code from https://groups.google.com/a/chromium.org/d/msg/chromium-extensions/8ArcsWMBaM4/2GKwVOZm1qMJ
function detectExtension(extensionId, callback) { 
  var img; 
  img = new Image(); 
  img.src = "chrome-extension://" + extensionId + "/test.png"; 
  img.onload = function() { 
    callback(true); 
  }; 
  img.onerror = function() { 
    callback(false); 
  };
}

หมายเหตุ: หากมีข้อผิดพลาดขณะโหลดไฟล์นี้ข้อผิดพลาดสแต็กเครือข่ายดังกล่าวจะปรากฏในคอนโซลโดยไม่มีความเป็นไปได้ที่จะปิดเสียง เมื่อ Chromecast ใช้วิธีนี้มันทำให้เกิดการโต้เถียงกันเล็กน้อยเพราะเหตุนี้ ด้วยวิธีการแก้ปัญหาที่น่าเกลียดมากในการขึ้นบัญชีดำข้อผิดพลาดที่เฉพาะเจาะจงมากจาก Dev Tools โดยทีม Chrome

หมายเหตุสำคัญ:วิธีนี้จะใช้ไม่ได้ใน Firefox WebExtensions ทรัพยากรที่สามารถเข้าถึงได้บนเว็บจะเปิดเผยส่วนขยายให้กับการพิมพ์ลายนิ้วมือเนื่องจาก URL สามารถคาดเดาได้โดยการรู้ ID Firefox ตัดสินใจปิดช่องนั้นโดยกำหนด URL แบบสุ่มเฉพาะอินสแตนซ์ให้กับทรัพยากรที่สามารถเข้าถึงได้บนเว็บ:

จากนั้นไฟล์จะพร้อมใช้งานโดยใช้ URL เช่น:

moz-extension://<random-UUID>/<path/to/resource>

UUID นี้สร้างขึ้นแบบสุ่มสำหรับทุกอินสแตนซ์ของเบราว์เซอร์และไม่ใช่ ID ของส่วนขยายของคุณ วิธีนี้ป้องกันไม่ให้เว็บไซต์พิมพ์ลายนิ้วมือส่วนขยายที่ผู้ใช้ติดตั้งไว้

อย่างไรก็ตามในขณะที่ส่วนขยายสามารถใช้runtime.getURL()เพื่อรับที่อยู่นี้คุณไม่สามารถฮาร์ดโค้ดในเว็บไซต์ของคุณได้

ฉันคิดว่าฉันจะแบ่งปันงานวิจัยของฉันเกี่ยวกับเรื่องนี้ ฉันจำเป็นต้องตรวจสอบได้ว่ามีการติดตั้งส่วนขยายเฉพาะสำหรับบางไฟล์หรือไม่: /// ลิงก์จึงจะทำงานได้ ฉันเจอบทความนี้ที่นี่ ซึ่งอธิบายวิธีการรับ 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) เพื่อตรวจหาการติดตั้งส่วนขยายจำนวนเท่าใดก็ได้

อีกวิธีที่เป็นไปได้ถ้าคุณเป็นเจ้าของเว็บไซต์คือการใช้การติดตั้งแบบอินไลน์

if (chrome.app.isInstalled) {
  // extension is installed.
}

ฉันรู้ว่านี่เป็นคำถามเก่า แต่วิธีนี้ได้รับการแนะนำใน Chrome 15 ดังนั้นฉันจึงคิดว่ารายการรหัสสำหรับทุกคนที่กำลังมองหาคำตอบ

ฉันใช้วิธีคุกกี้:

ในไฟล์ 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 ตรวจสอบว่ามีคุกกี้อยู่หรือไม่และอัปเดตตามนั้น วิธีนี้และอาจเป็นวิธีการอื่น ๆ ส่วนใหญ่ที่กล่าวถึงในที่นี้แน่นอนว่าผู้ใช้อาจได้รับการพัฒนาเว้นแต่คุณจะพยายามและให้ส่วนขยายสร้างคุกกี้ที่กำหนดเองขึ้นอยู่กับการประทับเวลา ฯลฯ และให้แอปพลิเคชันของคุณวิเคราะห์ทางฝั่งเซิร์ฟเวอร์เพื่อดูว่าเป็นผู้ใช้จริงหรือไม่ ส่วนขยายหรือบางคนแอบอ้างว่ามีโดยการแก้ไขคุกกี้ของเขา

มีวิธีอื่นที่แสดงในโพสต์ของ Google Groupsนี้ ในระยะสั้นคุณสามารถลองตรวจสอบว่าไอคอนส่วนขยายโหลดสำเร็จหรือไม่ ซึ่งอาจเป็นประโยชน์หากส่วนขยายที่คุณกำลังตรวจสอบไม่ใช่ของคุณเอง

หน้าเว็บโต้ตอบกับส่วนขยายผ่านสคริปต์พื้นหลัง

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>

ส่วนขยายของคุณสามารถโต้ตอบกับเว็บไซต์ได้ (เช่นการเปลี่ยนตัวแปร) และเว็บไซต์ของคุณสามารถตรวจพบสิ่งนี้ได้

แต่ควรมีวิธีที่ดีกว่านี้คือ ฉันสงสัยว่า Google ทำอย่างไรในแกลเลอรีส่วนขยาย (มีการทำเครื่องหมายแอปพลิเคชันที่ติดตั้งไว้แล้ว)

แก้ไข:

แกลเลอรีใช้ฟังก์ชันchrome.management.get ตัวอย่าง:

chrome.management.get("mblbciejcodpealifnhfjbdlkedplodp", function(a){console.log(a);});

แต่คุณสามารถเข้าถึงวิธีการได้จากหน้าที่มีสิทธิ์ที่ถูกต้องเท่านั้น

คำตอบมากมายที่นี่จนถึงตอนนี้คือ Chrome เท่านั้นหรือมีการปรับค่าใช้จ่าย HTTP โซลูชันที่เราใช้แตกต่างกันเล็กน้อย:

1. เพิ่มวัตถุใหม่ในรายการ content_scripts manifest ดังนี้:

{
  "matches": ["https://www.yoursite.com/*"],
  "js": [
    "install_notifier.js"
  ],
  "run_at": "document_idle"
}

วิธีนี้จะทำให้โค้ดใน install_notifier.js ทำงานบนไซต์นั้นได้ (หากคุณยังไม่มีสิทธิ์)

2. ส่งข้อความไปยังทุกไซต์ในคีย์รายการด้านบน

เพิ่มสิ่งนี้ใน install_notifier.js (โปรดทราบว่าสิ่งนี้ใช้การปิดเพื่อป้องกันไม่ให้ตัวแปรเป็นโกลบอล แต่ไม่จำเป็นอย่างยิ่ง):

// Dispatch a message to every URL that's in the manifest to say that the extension is
// installed.  This allows webpages to take action based on the presence of the
// extension and its version. This is only allowed for a small whitelist of
// domains defined in the manifest.
(function () {
  let currentVersion = chrome.runtime.getManifest().version;
  window.postMessage({
    sender: "my-extension",
    message_name: "version",
    message: currentVersion
  }, "*");
})();

ข้อความของคุณสามารถพูดอะไรก็ได้ แต่การส่งเวอร์ชันนี้มีประโยชน์เพื่อให้คุณรู้ว่าคุณกำลังจัดการกับอะไร จากนั้น ...

3. ในเว็บไซต์ของคุณให้ฟังข้อความนั้น

เพิ่มสิ่งนี้ในเว็บไซต์ของคุณที่ใดที่หนึ่ง:

window.addEventListener("message", function (event) {
  if (event.source == window &&
    event.data.sender &&
    event.data.sender === "my-extension" &&
    event.data.message_name &&
    event.data.message_name === "version") {
    console.log("Got the message");
  }
});

ใช้งานได้ใน Firefox และ Chrome และไม่ต้องใช้ HTTP เหนือศีรษะหรือปรับเปลี่ยนหน้า

นี่คือแนวทางที่ทันสมัยอื่น ๆ :

const checkExtension = (id, src, callback) => {
    let e = new Image()
    e.src = 'chrome-extension://'+ id +'/'+ src
    e.onload = () => callback(1), e.onerror = () => callback(0)
}

// "src" must be included to "web_accessible_resources" in manifest.json
checkExtension('gighmmpiobklfepjocnamgkkbiglidom', 'icons/icon24.png', (ok) => {
    console.log('AdBlock: %s', ok ? 'installed' : 'not installed')
})
checkExtension('bhlhnicpbhignbdhedgjhgdocnmhomnp', 'images/checkmark-icon.png', (ok) => {
    console.log('ColorZilla: %s', ok ? 'installed' : 'not installed')
})

หากคุณสามารถควบคุมส่วนขยาย 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 ที่นี่ เป็นที่น่าสงสัยว่าวิธีนี้จะหยุดทำงานเร็ว ๆ นี้

คุณสามารถใช้วิธีข้ามเบราว์เซอร์ที่ฉันเคยใช้ ใช้แนวคิดของการเพิ่ม div

ในสคริปต์เนื้อหาของคุณ (เมื่อใดก็ตามที่สคริปต์โหลดควรทำเช่นนี้)

if ((window.location.href).includes('*myurl/urlregex*')) {
        $('html').addClass('ifextension');
        }

ในเว็บไซต์ของคุณคุณยืนยันบางอย่างเช่น

if (!($('html').hasClass('ifextension')){}

และส่งข้อความที่เหมาะสม

หากคุณกำลังพยายามตรวจหาส่วนขยายจากเว็บไซต์ใด ๆ โพสต์นี้ช่วยได้: https://ide.hey.network/post/5c3b6c7aa7af38479accc0c7

โดยทั่วไปวิธีแก้ปัญหาคือเพียงพยายามรับไฟล์เฉพาะ (manifest.json หรือรูปภาพ) จากส่วนขยายโดยระบุพา ธ นี่คือสิ่งที่ฉันใช้ ทำงานได้แน่นอน:

const imgExists = function(_f, _cb) {
    const __i = new Image();
    __i.onload = function() {
        if (typeof _cb === 'function') {
            _cb(true);
        }
    }
    __i.onerror = function() {
        if (typeof _cb === 'function') {
            _cb(false);
        }
    }
    __i.src = _f;
    __i = null;
});

try {
    imgExists("chrome-extension://${CHROME_XT_ID}/xt_content/assets/logo.png", function(_test) {
        console.log(_test ? 'chrome extension installed !' : 'chrome extension not installed..');
        ifrm.xt_chrome = _test;
        // use that information
    });
} catch (e) {
    console.log('ERROR', e)
}

นี่คือวิธีตรวจหาส่วนขยายที่ติดตั้งและแสดงข้อความเตือน

ก่อนอื่นคุณต้องเปิดไฟล์ manifest ของส่วนขยายโดยไปที่ chrome-extension: //extension_id_here_hkdppipefbchgpohn/manifest.json และมองหาชื่อไฟล์ใด ๆ ในส่วน "web_accessible_resources"

<div class="chromewarning" style="display:none">
    <script type="text/javascript">
                            $.get("chrome-extension://extension_id_here_hkdppipefbchgpohn/filename_found_in_ web_accessible_resources.png").done(function () {
                              $(".chromewarning").show();
                            }).fail(function () {
                             //  alert("failed.");
                            });
                        </script>
                        <p>We have detected a browser extension that conflicts with learning modules in this course.</p>
            </div>