Chrome 扩展中的 JavaScript 注入

发布于 2024-12-29 18:30:06 字数 353 浏览 1 评论 0原文

我是“chrome 扩展开发”的新手，我想制作一个扩展。
当用户单击弹出页面上的按钮时，该扩展必须在网页中注入代码。我看到了关于此的不同主题，但似乎不可能注入与网页现有代码“交互”的代码。例如：当用户打开网页时会创建一个名为 test 的变量，我想获取该变量并在我的代码中使用它（例如：alert(test);）。我尝试了多种方法来实现这一目标，但它不起作用。我该怎么做？我尝试过：

chrome.tabs.executeScript(null,{code:"alert('test')"}); 
console.log("alert('test');");

这有效，但仅适用于弹出页面，因此变量“test”不存在。

原文

I'm new with 'chrome extension development', and I wanted to make a extension.
That extension has to inject code in a web page when the user clicks a button on the popup-page. I saw different subjects about that, but it doesn't seem to be possible to inject code that 'interacts' with the existing code of the web page. For example: a variable called test is made when the user opens a web page, I want to get that variable and use it in my code (for example: alert(test);). I tried several ways to achieve this, but it won't work. How can I do this? I tried:

chrome.tabs.executeScript(null,{code:"alert('test')"}); 
console.log("alert('test');");

This worked, but only for the popup page and so the variable 'test' didn't exist.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与往事干杯 2025-01-05 18:30:06

谢谢，它现在可以工作了，这是我的代码：

Popup:

function makeRequest(act){
chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {action: act, tabid: tab.id}, function(response) { });
});}
//inputs:
<input type="button" id="addDiv" value="Add Div" onClick="makeRequest(this.id);" />
<input type="button" id="addButton" value="Add button" onClick="makeRequest(this.id);" />

contentScript:

function injectCode(text) {
    var script = document.createElement("script");
    var parent = document.documentElement;
    script.text = text;
    script.setAttribute("id", "codeInjection");
    script.setAttribute("extension", "Chrome");
    parent.appendChild(script);
    parent.removeChild(script);
}
var codes = Array();
codes["addDiv"] = "alert('Add a div');";
codes["addButton"] = "alert('Add a button');";
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    switch (request.action) {
        case "addDiv":
            injectCode(codes["addDiv"]);
            break;
        case "addButton":
            injectCode(codes["addButton"]);
    }
});

Thanks, it's working now, here is my code:

Popup:

function makeRequest(act){
chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {action: act, tabid: tab.id}, function(response) { });
});}
//inputs:
<input type="button" id="addDiv" value="Add Div" onClick="makeRequest(this.id);" />
<input type="button" id="addButton" value="Add button" onClick="makeRequest(this.id);" />

contentScript:

function injectCode(text) {
    var script = document.createElement("script");
    var parent = document.documentElement;
    script.text = text;
    script.setAttribute("id", "codeInjection");
    script.setAttribute("extension", "Chrome");
    parent.appendChild(script);
    parent.removeChild(script);
}
var codes = Array();
codes["addDiv"] = "alert('Add a div');";
codes["addButton"] = "alert('Add a button');";
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    switch (request.action) {
        case "addDiv":
            injectCode(codes["addDiv"]);
            break;
        case "addButton":
            injectCode(codes["addButton"]);
    }
});

回复收藏 0 原文