Chrome扩展程序弹出窗口中的表单提交

Question

我正在尝试构建我的第一个Chrome扩展程序。 我需要它具有提交的简单表格。 我无法在popup.js文件上运行任何文件。 我发现这篇文章很相似，但似乎连基本的日志都无法在控制台中工作。 如何获得表单提交popup.html chrome扩展的价值

这是我的popup.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
<form id="useCasePostForm">
<input type="text" id="useCase" /> 
<input type="submit">
</form>
</body>
</html>

这是我目前尝试的popup.js

$(function() {
console.log("console logging works");


document.getElementById("useCasePostForm").addEventListener("submit", handleClick, false);


function handleClick(val) {
    console.log("calling handleClick"); //printing
    console.log(val); //prints undefined

    chrome.runtime.sendMessage({
        from: "popup",
        subject: val
    });
}
});

我尝试过的另一种尝试是，我认为自己在以下方面有所进步：

 window.addEventListener('load', function(evt) {

     // Handle the bookmark form submit event with our useCasePost function
     document.getElementById('useCasePostForm')
             .addEventListener('submit', useCasePostFunc);

 });
 function useCasePostFunc(event){
    event.preventDefault();
    conosle.log("in the function")
    var useCase = document.getElementById("useCase")
     //The URL to POST our data to
     var postUrl = 'https://localhost:8080/useCases/create';
     console.log("in function")
     // Set up an asynchronous AJAX POST request
     $.ajax({
        'url': postUrl,
        "type": "POST",
        data:{
            id:4
        }
     })

 }

这也是我的清单文件。

{
  "manifest_version": 2,
  "name": "PIT",
  "version": "0.1",
  "background": {
    "scripts":["background.js"]
  },
   "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
  {
    "matches": [
      "https://app.hubspot.com/*"
    ],
    "js": ["jquery-3.4.1.min.js", "content.js"]
  }
],
  "permissions": [
    "webRequest",
    "tabs",
    "<all_urls>"
  ]
}

如果有人对我如何可以作为第一步收到表单提交有任何指示，将不胜感激。

Answer 1

为了对此进行跟进，最终得到了成功。

document.addEventListener('DOMContentLoaded', function () {
    console.log("the doc loaded")
    var form = document.getElementById("useCasePostForm")
    console.log(form)
    form.addEventListener('submit',function(e){
        e.preventDefault()
        console.log("added to the form")
    })
});

Chrome扩展程序弹出窗口中的表单提交

问题描述

1 个解决方案

解决方案1
0 2019-07-30 14:47:44

Chrome扩展程序弹出窗口中的表单提交

问题描述

1 个解决方案

解决方案1 0 2019-07-30 14:47:44

解决方案1
0 2019-07-30 14:47:44