Question

我正在编写我的第一个Chrome扩展程序。现在，我想将用户输入（API密钥）作为选项保存到代码中，以便代码在此输入下运行。

我有一个文件background.js，该文件运行我的code.js

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, {file: "code.js"})
});

我有文件code.js，看起来像：

(function(){var win=window.open('https://my-test-tool.com?url='+encodeURIComponent(window.location.href )+'&k=<API-KEY>','_blank');win.focus();})()

我有文件options.html，其格式为输入API密钥，例如

<label>
Input API Key
<input type="text" id="wptk">
</label>
<button id="save" onclick="save_options()">Save</button>
<div id="status"></div>
<script src="options.js"></script>

我还有option.js，其代码如下：

function save_options() {
  var api = document.getElementById('wptk').value;
    chrome.storage.sync.set({
    savedApi: api,
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

document.getElementById('save').addEventListener('click', save_options);

所有这些对象都已经在manifest.json和storage中。

我现在在这一点上：在安装扩展程序后，我从扩展程序工具栏打开选项，在输入字段中输入字符串，然后按 save 后，我看到触发了Option saved消息。

问题：如何将保存在选项中的用户输入放在code.js之后而不是占位符&k=之后，放在<API-KEY>中。 / p>

示例：如果用户在选项中输入123并保存，我希望代码在其code.js中从

更改

(function(){var win=window.open('https://my-test-tool.com?url='+encodeURIComponent(window.location.href )+'&k=<API-KEY>','_blank');win.focus();})()

到

(function(){var win=window.open('https://my-test-tool.com?url='+encodeURIComponent(window.location.href )+'&k=123','_blank');win.focus();})()

Answer 1

直接从后台脚本打开新标签：

chrome.browserAction.onClicked.addListener(tab => {
  if (!tab.url) return;
  chrome.storage.sync.get('savedApi', ({savedApi}) => {
    chrome.tabs.create({
      url: `https://my-test-tool.com?url=${encodeURIComponent(tab.url)}&k=${savedApi}`,
      index: tab.index + 1,
      openerTabId: tab.id,
    });
  });
});

要打开单独的窗口并控制其大小/位置，可以使用chrome.windows.create。

将用户输入作为选项保存到代码中-Google Chrome扩展程序

1 个答案: