Question

我是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);

});
});

任何人都可以建议我如何动态发送文本框 jsonName 值，以便将文档的动态数据作为警报获取。例如，如果用户在 jsonName 中输入 window.location.href ，则应将输入字段的值作为警报返回。

Answer 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，标题等），它可以简化事情！

将表单值发送到chrome扩展程序

1 个答案: