创建Chrome扩展程序以将数据发送到本地主机服务器

create chrome extension to send data into localhost server

本文关键字：主机 服务器 主机服务 扩展 Chrome 程序 数据 创建      更新时间：2023-09-26

我想创建一个谷歌浏览器扩展程序，将数据从弹出表单发送到本地主机服务器。 我创建了以下文件。一切正常，但数据不会发送到本地主机服务器。谁能帮我我的错误在哪里？谢谢。

manifest.json 

 {
  "manifest_version": 2,
  "name": "server Plug-ins",
  "description": "Send data to database",
  "version": "1.0",
  "icons": {
    "48": "icon.png"
  },
  "permissions": [
      "history",
      "browsingData",
        "tabs",
        "<all_urls>",
        "http://192.168.1.222/*",
        "storage"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Send data to server!"
  }
}

警报.js

document.write(" i am here . . .");
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "http://192.168.1.222/my_parse_file.php";
var fn = document.getElementById("name").value;
var ln = document.getElementById("details").value;
var vars = "name="+fn+"&details="+ln;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request

弹出窗口.html

<body>
    <label for="">Name</label><br><input type="text" id="name"> <br>
    <label for="">Details</label><textarea id="details"></textarea>
    <input id="clickme" name="myBtn" type="submit" value="click me">
    <script type="text/javascript" src="popup.js"></script>
</body>

弹出窗口.js

function hello() {
  chrome.tabs.executeScript({
    file: 'alert.js'    
  }); 
}
document.getElementById('clickme').addEventListener('click', hello);

我认为问题是您的弹出窗口input元素无法在上下文中访问，因为alert.js脚本正在运行。

在alert.js 的上下文中，document是指在其中注入脚本的选项卡的文档。

您可以执行类似操作以使其工作，将弹出窗口.js文件的内容替换为以下内容：

function hello() {
    function contentScript(fn, ln){
        document.write(" i am here . . .");
        var hr = new XMLHttpRequest();
        var url = "http://192.168.1.222/my_parse_file.php";
        var vars = "name="+fn+"&details="+ln;
        hr.open("POST", url, true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        hr.send(vars);
    }
    var fn = document.getElementById("name").value;
    var ln = document.getElementById("details").value;
    chrome.tabs.executeScript({
        code: (contentScript.toString() + "'ncontentScript('" + fn + "', '" + ln + "');")
    }); 
}
document.getElementById('clickme').addEventListener('click', hello);

您可以删除alert.js文件，因为现在，扩展名将直接注入JavaScript代码，而不是注入文件。

相关文章：