Question

我做了一个小的Chrome扩展程序，该扩展程序可以自动完成自己的现场工作；目前仅适用于我的文档中的onkeydown event listener，该文档通过content.js文件运行。

此外，我还有一个弹出菜单（带有popup.html和popup.js），其中包含一些方便的链接。

我正在尝试在弹出菜单中创建一个链接，以创建一个小对话框（或弹出浏览器窗口），该对话框本身将包含一些链接（可能在html页面上），当按下该链接时，将填充一些打开文档的字段；类似于事件监听器的操作。

当前，我在弹出窗口中有一个链接，该链接只是打开“弹出”浏览器窗口，但我找不到如何获取它来访问打开它的文档的方法。代码如下：

popup.js：

function newPopup(url) {
	popupWindow = window.open(url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}

var link;

window.onload = function(){
	link = document.getElementById('templates');
	link.addEventListener('click', continueScript);
}
 
function continueScript(){
	newPopup('https://www.example-site.com/');
}

popup.html：

	<script src="popup.js"></script>
  <li><a class="templates" id="templates" href="#"><i class="fa fa-wpforms"></i>Templates</a></li>

现场人口只是按照值编辑原理工作，如下所示：

function fillForms(summary, description) {
                document.getElementById('example1').value = summary;
                document.getElementById('example2').value = description;
                document.getElementById('example2').focus();
                
              }

感谢您的帮助！

Answer 1

使用Chrome扩展程序消息完全可以实现此目标。下面的示例显示如何通过单击对话框窗口中的链接来更改文档的背景颜色。请确保您的manifest.json包含activeTab权限：

"permissions": [
  "activeTab"
]

首先，创建一个dialog.html文件，并将您的popup.js中的函数链接到该文件：

function continueScript(){
    newPopup('dialog.html');
}

dialog.html：

<!doctype html>
<html>
  <head>
    <title>Dialog</title>
    <script src="dialog.js"></script>
  </head>
  <body>
    <a id="link" href="#">Change body color</a>
  </body>
</html>

dialog.js：

window.onload = function() {
  var link = document.getElementById('link');
  link.addEventListener('click', () => {
    // Get active tab.
    chrome.tabs.query({active: true}, (activeTabs) => {
      const tabId = activeTabs[0].id;
      const message = {
        backgroundColor: 'green'
      };
      const responseCallback = (responseMessage) => {
        // do something with the response if any ...
      };
      // Send a message to the content script of the active tab.
      chrome.tabs.sendMessage(tabId, message, {}, responseCallback);
    });
  });
};

然后在内容脚本中添加消息的侦听器。

content.js：

window.onload = function() {
  // Listen for a message from dialog.js and send a response if needed.
  chrome.runtime.onMessage.addListener((message, sender, response) => {
    // Do stuff in your document.
    document.body.style.backgroundColor = message.backgroundColor;
  });
};

传递和填写字段值的方式相同。

参考文献：

popup window in Chrome extension

https://developer.chrome.com/extensions/tabs#method-query

https://developer.chrome.com/apps/runtime#event-onMessage

Chrome扩展程序；通过可以与文档进行交互的弹出窗口制作一个对话框？

1 个答案: