将表单值发送到 chrome 扩展答案

【问题标题】：Sending the form value to the chrome extension将表单值发送到 chrome 扩展
【发布时间】：2015-08-22 09:07:22
【问题描述】：

我是 chrome 扩展程序开发的新手，我正在创建一个 chrome 扩展程序，它根据用户提供的表单数据检索一些数据。但是，我不知道如何将表单值动态发送到 chromes 扩展。这是我正在使用的以下代码。 manifest.json

{
"manifest_version": 2,
"name": "Bookmark Extension Example",
"description": "POST details of the current page to a remote endpoint.",
"version": "0.2",
"background": {
    "scripts": ["event.js"],
    "persistent": false
},
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
},
"permissions": [
    "tabs", 
    "http://*/*", 
    "https://*/*"
]
}

popup.html

<body>
    <form id="addbookmark">
        <p><label for="title">Title</label><br />
        <input type="text" id="title" name="title" size="50" value="" /></p>
        <p><label for="url">Url</label><br />
        <input type="text" id="url" name="url" size="50" value="" /></p>
        <p><label for="summary">Summary</label><br />
        <textarea id="summary" name="summary" rows="6" cols="35"></textarea></p>
        <p><label for="tags">Json Name</label><br />
        <input type="text" id="jsonName" name="jsonName" size="50" value="document.title" /></p>
        <p>
            <input id="submitJson" type="submit" value="Send JSON Object / Value" />
            <!-- <span id="status-display"></span> -->
        </p>
    </form>
</body>

content.js

chrome.runtime.sendMessage({
'title': document.title,
'url': window.location.href,
'summary': window.location.href
});

event.js

function getPageDetails(callback) { 

chrome.tabs.executeScript(null, { file: 'content.js' }); 

chrome.runtime.onMessage.addListener(function(message)  { 

    callback(message); 
}); 
};

popup.js

function onPageDetailsReceived(pageDetails)  { 
document.getElementById('title').value = pageDetails.title; 
document.getElementById('url').value = pageDetails.url; 
document.getElementById('summary').value = pageDetails.summary;
} 



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

chrome.runtime.getBackgroundPage(function(eventPage) {

  eventPage.getPageDetails(onPageDetailsReceived);

});
});

谁能建议我如何动态发送 textbox jsonName 值以获取文档的动态数据作为警报。例如，如果用户在 jsonName 中输入 window.location.href，它应该将输入字段的值作为警报返回。

【问题讨论】：

标签： javascript html google-chrome-extension

【解决方案1】：

在我们开始之前有一个小问题，请确保在您的 HTML 中包含弹出 JS，如下所示：

popup.html

<body>
    <form id="addbookmark">
        <p><label for="title">Title</label><br />
        <input type="text" id="title" name="title" size="50" value="" /></p>
        <p><label for="url">Url</label><br />
        <input type="text" id="url" name="url" size="50" value="" /></p>
        <p><label for="summary">Summary</label><br />
        <textarea id="summary" name="summary" rows="6" cols="35"></textarea></p>
        <p><label for="tags">Json Name</label><br />
        <input type="text" id="jsonName" name="jsonName" size="50" value="document.title" /></p>
        <p>
            <input id="submitJson" type="submit" value="Send JSON Object / Value" />
            <!-- <span id="status-display"></span> -->
        </p>
    </form>
    <script src="popup.js"></script>
</body>

接下来，由于content.js 在您的浏览器操作打开时在页面上执行，您可以包含额外的代码来打开一个Port 返回到弹出窗口，页面和弹出窗口可以通过它进行通信。 connect 和 onConnect 是这里的相关方法。像这样：

content.js

chrome.runtime.sendMessage({
  'title': document.title,
  'url': window.location.href,
  'summary': window.location.href
});

// Create port.
var port = chrome.runtime.connect({
  name: "page"
});

// Listen for messages.
port.onMessage.addListener(function (message) {
  if (message.name === "query") {
    var objectPath = message.query;
    var parts = objectPath.split('.');
    var obj = window;
    var error = false;
    // Get value.
    for (var i = 0; i < parts.length; i++) {
      var part = parts[i];
      // Check if in current object or prototype chain.
      if (part in obj) {
        obj = obj[part];
      } else {
        error = true;
        break;
      }
    }

    if (error) {
      port.postMessage({
        name: "query_error",
        query: objectPath,
        reason: "window." + parts.slice(0, i + 1).join('.')
      });
    } else {
      port.postMessage({
        name: "query_response",
        query: objectPath,
        value: obj
      });
    }
  }
});

负责创建端口并侦听来自弹出窗口的查询。下一个：

popup.js

function onPageDetailsReceived(pageDetails) {
  document.getElementById('title').value = pageDetails.title;
  document.getElementById('url').value = pageDetails.url;
  document.getElementById('summary').value = pageDetails.summary;
}

// Listen for page to connect.
chrome.runtime.onConnect.addListener(function (port) {
  if (port.name === "page") {
    console.log("Received page port");
    port.onMessage.addListener(function (message) {
      if (message.name === "query_error") {
        alert("Error retrieving " + message.query + "!\n" + message.reason + " was not found.");
      } else if (message.name === "query_response") {
        alert("Retrieved value for " + message.query + ": " + message.value);
      }
    });
    // Set button listener.
    document.getElementById("submitJson").addEventListener("click", function (e) {
      var value = document.getElementById("jsonName").value;
      if (value !== "") {
        port.postMessage({
          name: "query",
          query: value
        });
      } else {
        alert("You must enter a value!");
      }
    });
  } else {
    console.warn("Received unknown port.");
  }
});

window.addEventListener('load', function(evt) {
  chrome.runtime.getBackgroundPage(function(eventPage) {
    eventPage.getPageDetails(onPageDetailsReceived);
  });
});

它负责设置点击侦听器、通过端口发送查询以及处理响应。

有几种方法可以改进上述内容，例如使用端口发送带有初始页面信息的消息而不是sendMessage，但这应该让您了解如何继续。还要确保查看chrome.tabs 中可用的现有 API。如果你能以这种方式获得你想要的信息（URL、标题等），它可以简化事情！

【讨论】：