Question

我一直在尝试开发chrome扩展程序，但是我遇到了一个问题，就是我自己无法解决。

该扩展程序将接收通用代码，并使用jwt创建令牌，并将添加cookie，并将创建的令牌添加到chrome。

我没有找到在Chrome扩展程序中使用纯JavaScript来使用jwt lib创建令牌的方法，因为在纯javascript中没有要求/导入功能。

我还测试过创建一个React应用。因此，我可以使用es6，并且可以使用require / import语句。在这种情况下，我可以创建所需的令牌，但不能将cookie注入chrome，因为chrome扩展名不允许通过“ universal-cookies” lib进行示例cookie注入。

Chrome扩展程序需要使用特定的API来插入我需要的Cookie，即chrome.cookies.set(object, callback);

所以问题是，使用纯JavaScript，我可以使用上面提到的chrome API，但是不能使用jwt创建令牌。借助react我可以创建令牌，但不能使用chrome API。

使用react我运行npm run build，然后将生成的包设置为扩展名。但是当我尝试捆绑项目时，chrome API会引发错误。

有些人对我如何解决此问题有想法吗？

manifest.json

{
  "manifest_version": 2,
  "name": "React Extension",
  "description": "Trying to create a google chrome extension",
  "version": "0.0.1",
  "browser_action": {
    "default_popup": "index.html"
  },
  "icons": {
    "16": "logo192.png",
    "48": "logo192.png",
    "128": "logo192.png"
  },
  "permissions": [ "tabs", "\u003Call_urls>", "cookies", "contextMenus", "unlimitedStorage", "notifications", "storage", "clipboardWrite" ]
}

App.js

import React from 'react';
import { sign } from 'jsonwebtoken';

export default class App extends React.Component {
  constructor() {
    super();
    this.createCookie = this.createCookie.bind(this);
  }

  addCookie(token) {
    chrome.cookies.set({
      "url": "http://my.domain.com.br",
      "name": "TOKEN",
      "value": token
    }, function (cookie) {
        console.log("Cookie has been set successfully");
    })
  }

  createCookie() {
    const code = document.getElementById('code').value;

    const token = sign({ claims: null }, "2f41ffb31", {
      subject: code.toString(),
      algorithm: 'HS256'
    });

    this.addCookie(token);
  }

  resetCookie() {
    chrome.cookies.remove({
      "url": "http://my.domain.com.br",
      "name": "TOKEN"
    }, function (cookie) {
      console.log("Cookie has been removed successfully");
    });
  }

  render() {
    return (
      <div>
        <input type="text" id="code" placeholder="code here" />
        <button id="create" onClick={this.createCookie}>Create</button>
        <button id="reset" onClick={this.resetCookie}>Remove</button>
        <span>Token: </span><span id="token"></span>
      </div>
    );
  }
}

带有ReactJS的JWT令牌和Cookie Chrome扩展程序

0 个答案: