Question

我正在为自己编写一个Web扩展，我需要根据当前页面上匹配的元素数来创建React按钮。我的扩展程序看起来像这样。

我很抱歉让这些变量是什么。由于NDA的原因，我需要尽可能地删除。

content-script.js

(function() {
  var a = document.URL;
  if (a.search("b") > -1) {
    var c = document.get("d").get("tag");
    var e = Array.from(c, f => f.get("g")); 
  }
  browser.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    browser.runtime.sendMessage({
      message: e
    });
  })

这是有效的（当它是完整的代码时），当它从我的button.js文件中收到消息时，将发送该数组

buttons.js

import React from 'react';
export default class Buttons extends React.Component {
  constructor(props) {
    super(props);
    this.func.bind(this);
  }

  componentDidMount() {
      browser.tabs.query({active: true, currentWindow: true}, function (tabs) {
        browser.tabs.sendMessage(tabs[0].id, {
          message: "z"
        });
      });
      browser.runtime.onMessage.addListener(this.func);
  }

  func(message) {
    const i = message.e;
    console.log(i);
  }
}

console.log确实从content-script.js（ e ）打印数组，但是我不确定如何使用 e 进行迭代和生成按钮以显示数组中有多少个项目。

如果有人对如何编写此文档有任何建议，或者有更好的方法来做，我会耳熟能详。我之所以使用React，是因为它比我以前编写的JS干净，并且随着时间的推移，此扩展最终会变得相当大，所以我想从一个好的基础开始。

扩展需要基于dom元素渲染React按钮

0 个答案: