Question

我可以在我的前端的JS脚本中与特定Chrome扩展程序的元素进行交互（例如，点击扩展程序的按钮）吗？

Answer 1

此扩展程序在点击时显示一个按钮，您将转到您的个人资料（“活动”标签）。要使用此扩展程序，您必须在此站点（StackOverflow）上，但不在您处于“活动”选项卡时（否则您将看不到效果）。

您的步骤（更多here）：

保存所有文件
转到chrome://extensions
将浏览器切换为开发者模式
点击 LOAD UNPACKED

的manifest.json

{  
    "manifest_version": 2,  

    "name": "Click",  
    "description": "Simple extension",  
    "version": "1.0.0",    
    "permissions": ["tabs", "<all_urls>"],  

    "browser_action": {  
        "default_icon": "icon48.png",  
        "default_popup": "popup.html"  
    }
}

popup.html

<!DOCTYPE html>  
<html>  
    <head><title>Title</title></head>  
<body>  
    <button id="btn-click">Go to profile</button>  
    <script src="popup.js"></script> 
</body>
</html>

popup.js

function injectTheScript() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

        chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
    });
}

document.getElementById('btn-click').addEventListener('click', injectTheScript);

content_script.js

function clickProfileLink() {
    var stackOverflowProfile = document.getElementsByClassName("my-profile")[0];

    stackOverflowProfile.click();
}

clickProfileLink();

有用的链接

Examples
初学者的好tutorial

从前端访问Chrome扩展程序元素

1 个答案: