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

叶夫根尼

我正在编写我的第一个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.jsonstorage太。

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

:我怎么能放的用户输入,这是我保存在选择进入code.js后,&k=而不是占位符<API-KEY>

例子:如果用户输入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();})()
wOxxOm

直接从背景脚本中打开新标签:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Google Chrome扩展程序中启动新窗口

Google Chrome扩展程序中的getSelection.getRangeAt(0)

使用Google用户以外的其他Google用户登录Chrome扩展程序

在Google Chrome扩展程序中添加子contextMenus

如何在Google Chrome扩展程序的HTML页面中添加常规Google搜索栏?

如何在Google Chrome扩展程序中获取基本URL

用户访问特定网站时,如何自动将网址保存在Google Chrome扩展程序中?

Google Fire使用Firebase登录Chrome中的Chrome扩展程序

Chrome扩展程序中的Google Analytics(分析)不起作用

Firefox中的Google Chrome扩展程序

Google Chrome扩展程序可以访问Chrome保存的网站密码吗?

阻止扩展程序安装在Google Chrome中

Chrome扩展程序中的Google Apps脚本?

在Google Chrome扩展程序中获取JSON

为Google Apps组织设置Chrome扩展程序选项

如何重定向Google Chrome扩展程序中的某些页面?

在Chrome扩展程序中无法使用Google Analytics(分析)

字体在Google Chrome扩展程序中不起作用

Chrome扩展程序选项

Google Chrome扩展程序错误

为什么chrome.pageCapture.saveAsMHTML无法在我的Google Chrome扩展程序中运行?

新标签中的Google Chrome扩展程序默认

在Google Chrome扩展程序中需要外部JavaScript

更新Google Chrome扩展程序

Chrome扩展程序:检测Google文档中的按键

在 Google Chrome 扩展程序中获取打开的弹出窗口

Google Chrome 扩展程序 - 从缓存中获取图像

如何在 Google Chrome 扩展程序中编码 GIF?

如何在 Chrome 扩展程序中启用使用 Google 登录?