javascript - 创建 chrome 扩展以将数据发送到本地主机服务器

标签 javascript php browser google-chrome-extension localhost

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

ma​​nifest.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!"
  }

}

alert.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

popup.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>

popup.js

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

最佳答案

我认为问题在于,如果 alert.js 脚本正在运行,则无法在上下文中访问弹出的 input 元素。

alert.js 的上下文中,document 指的是您注入(inject)脚本的选项卡的文档。

您可以执行类似的操作来使其正常工作,将 popup.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 文件,因为现在该扩展将直接注入(inject) JavaScript 代码,而不是注入(inject)文件。

关于javascript - 创建 chrome 扩展以将数据发送到本地主机服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38321951/

相关文章:

javascript - IE 没有设置 document.referrer

Javascript 未捕获类型错误 : Cannot read property 'getElementsByTagName' of null

php - 从 css 读取值

c# - WebBrowser ContextMenu 菜单项的运行操作

php - 如何在同一文本框中输入占位符和值

php - 是否可以隐藏 Yii2 列?

node.js - 无法访问本地主机 :3000/

javascript - 如何制作像 Facebook 或 Twitter 这样的分享按钮

javascript - 在 JavaScript 中使用正则表达式格式化圣经经文引用

javascript - 查找数组中对象的值(和键)(JS)