标签: browser-extension

我刚刚看到谷歌不支持打包的Chrome应用程序的消息

应用程序如何能够基于内容脚本运行？例如:adblockers,tampedmonkey,cookie编辑器等

背景

我必须对React应用程序使用内容安全策略。

之所以在这里不是什么大问题，是因为我正在创建一个WebExtension / Browser Extension /附加组件，并且这些附件确实具有这样的内容安全性策略，并且存在类似'unsafe-eval'且'unsafe-inline'被严格禁止的事情：

由于重大安全问题，addons.mozilla.org上列出的扩展名不允许在其CSP中使用'unsafe-eval'，'unsafe-inline'，远程脚本，blob或远程源的扩展名。

我已create-react-app严格按照本指南创建了该应用程序。目的是能够在那里使用WebExtensions的默认CSP进行响应，或者至少仅进行很小的调整。

但是请注意，出于安全原因，实际上也应该在“常规”网站上使用（如此严格的）CSP，因此，此问题不仅针对附加组件制造商。

问题

但是当我运行时npm run build，生成index.html的确包含了足够多的内联JS代码。

题

所以我该如何配置/使用反应以不这样做并...

1. 而是将所有JS / CSS代码放入单独的文件中？
2. 或添加名词或CSP允许的其他内容？
3. 或以类似方式解决该问题？

编辑

实际上，似乎开发版本（我在运行时创建npm start）没有这样的缩小。所以我问了一个单独的问题，关于如何从那里获取文件：如何在不缩小的情况下构建React的生产版本？

我使用Crossrider构建了我的扩展,目前我的所有代码都在extension.js文件中.但是,它在这个单片文件中变得越来越难以维护.有没有办法将我的代码拆分成单独的文件,仍然在我的扩展中使用它们？

因此,例如,如果我的extension.js文件的结构类似于以下示例,我希望函数f1和f2位于我可以加载到扩展中的单独文件中:

appAPI.ready(function($) {
  init();
  f1();
  f2();
  ...

  function init() {
    // init code
    ...
  }
  function f1() {
    //hundreds of lines of code
  }
  function f2() {
    //hundreds of lines of code
  }
  ...
});

我正在为 chrome 浏览器开发一个扩展。我使用 KangoExtensions 框架。该扩展程序是用 JavaScript 编写的。我想读取位于本地文件系统上的文件的内容。实现这一点的最简单方法是什么？

我为Firefox和Chrome构建了一个Greasemonkey用户脚本,现在我想将其转换为Safari扩展和Opera扩展.

是否有像Arantius的Greasemonkey-to-extension编译器那样的编译器,但对于Opera或Safari？

我正在尝试更新 Manifest V3 的简单扩展。我一定做错了什么，因为诸如此类的简单标签permissions无法正常工作...我知道 Chrome 正在读取该节，因为如果我输入虚假权限，我会收到错误，但 about://extensions 不会没有显示contextMenus我的扩展程序的许可，即使它在那里。并且chrome.contextMenus未定义，所以我无法创建我的菜单。

Manifest V3 是否还处于半生不熟状态，尚未准备好迎接黄金时段，或者我正在做一些被默默忽略的愚蠢事情？

{
    "manifest_version": 3,
    "name": "TESS+",
    "version": "0.043",

    "description": "TESS+ -- My browser extension",

    "icons": {
        "48": "TESS+Icon.png"
    },

    "content_scripts": [
        {
            "matches": ["*://tmsearch.uspto.gov/bin/showfield*" ],
            "js": ["jquery-3.6.0.min.js", "tess+.js", "FH.js", "DateTime.js"]
        }
    ],

    "background": {
        "service_worker": "tess-bg.js"
    },

    "web_accessible_resources": [
        {
            "resources": [ "TESS+Button.png" ],
            "matches": [ "https://tsdr.uspto.gov/*" ]
        }
    ],

    "permissions": [
        "contextMenus"
    ],

    "host_permissions": [
        "http://tsdr.uspto.gov/",
        "https://tsdr.uspto.gov/"
    ]

}

我正在尝试为一个将www.site.com重定向到site.com的网站获得Chrome扩展程序

此清单文件有效.

{
"name" : "MySite Redesign",
"version": "0.1",
"manifest_version": 2,
"description" : "Improves MySite visual design to make the interface cleaner.",
"content_scripts" : [{
    "matches" : ["*://www.mysite.com/*"],
    "css" : ["style.css"]
  }]
}

事实并非如此

{
"name" : "MySite Redesign",
"version": "0.1",
"manifest_version": 2,
"description" : "Improves MySite visual design to make the interface cleaner.",
"content_scripts" : [{
    "matches" : ["mysite.com/*"],
    "css" : ["style.css"]
  }]
}

错误如下:

"无法从'/ Users/colmtuite/dev/mysite-extension'加载扩展名.'intent_scripts [0] .matches [0]'的值无效:缺少方案分隔符."

我正在使用crossrider开发浏览器扩展.我添加了一个上下文菜单(background.js)

   var ContextData;
    appAPI.contextMenu.add("key1", "Send Data To Server", function (data) {
        var ContextData = 'pageUrl: ' + data.pageUrl + '\r\n' +
                         'linkUrl: ' + data.linkUrl + '\r\n' +
                         'selectedText:' + data.selectedText + '\r\n' +
                         'srcUrl:' + data.srcUrl;

    }, ["all"]);

在用户点击我要发送ContextData到extension.js.at extension.js时,某些功能将接收数据并将其发送到我的服务器(将接受数据的Rest API).

要将数据发送到服务器,我已对此进行了测试,并且工作正常(extension.js中的代码示例)

appAPI.ready(function($) {

var dataToSend =="test data";

    appAPI.request.post({
        url: 'REST API URL',
        postData: dataToSend,
        onSuccess: function(response, additionalInfo) {
            var details = {};

            details.response = response;

        },
        onFailure: function(httpCode) {
        //  alert('POST:: Request failed. HTTP …

我正在开发一个webapp,我遇到了JavaScript问题.

以下是导致问题的HTML的简化版本.我有一些嵌套contenteditable divs(我用占位符文本替换了真实内容):

<div contenteditable="true" id="div1">
    text
    <div contenteditable="inherit" id="div2">
        text
        <div contenteditable="inherit" id="div3">
            text
        </div>
        text
    </div>
    text
</div>

我想通过JavaScript获取所选元素(由用户编辑),但到目前为止我还没有找到一种方法(成功).

我尝试了什么,为什么它不起作用:

我尝试过使用document.activeElement,它应该返回焦点中的任何一个元素.通常这是有效的,但在使用嵌套contenteditable元素时它不会产生所需的结果.它返回最上面的contenteditable祖先,而不是返回用户正在编辑的元素.

例如,如果div2选择/正在编辑,则document.activeElement返回div1.如果div3选择/正在编辑,document.activeElement也会返回div1.

所以我想document.activeElement这不是正确的方法.

如何获得正在编辑的最具体元素,而不是其最重要的contenteditable祖先？