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

Question

I'm trying to build my first Chrome Extension. 我正在尝试构建我的第一个Chrome扩展程序。 I need it to have a simple form that submits. 我需要它具有提交的简单表格。 I'm having trouble getting anything to run on my popup.js file. 我无法在popup.js文件上运行任何文件。 I found this post to be similar but can't seem to get even the basic logging to work in the console. 我发现这篇文章很相似，但似乎连基本的日志都无法在控制台中工作。 How to get value of form submission popup.html chrome extension 如何获得表单提交popup.html chrome扩展的价值

Here is my popup.html 这是我的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>

Here is my current try at the popup.js 这是我目前尝试的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
    });
}
});

My other attempt I came up with this which I think I was getting a bit ahead of myself on: 我尝试过的另一种尝试是，我认为自己在以下方面有所进步：

 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
        }
     })

 }

Here is my manifest file as well. 这也是我的清单文件。

{
  "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>"
  ]
}

If anyone has any pointers on how I can receive the form submission as a first step it would be greatly appreciated. 如果有人对我如何可以作为第一步收到表单提交有任何指示，将不胜感激。

Answer 1

To follow up on this, this ended up being the winning code. 为了对此进行跟进，最终得到了成功。

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