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