关于chrome插件问题,请各位专家解答!

chrome插件,直接运行下面代码可用,但是封装在chrome插件就提示 wdatepicker not defined,试过在manifest中加入runat 但是没用

function(){
   let v =WdatePicker;
   WdatePicker=function(a,b){
    a['dateFmt']='yyyy-MM-dd HH:mm:ss';
    v(a,b);
   }
})()

在 Chrome 插件中,内容脚本和页面的 JavaScript 环境是独立的,所以不能直接访问页面的全局对象。
要使用页面中的全局对象,你试试使用 window.postMessage 在内容脚本和页面之间进行通信。具体实现可以参考下这个:

  1. 在页面中定义一个函数,并在内容脚本中调用这个函数。
  2. 在页面中通过 window.postMessage 将数据传递给内容脚本,然后内容脚本通过处理接收到的数据实现操作。

或者如果你没有在页面中定义函数,试着改下代码:

window.addEventListener('message', function(event) {
  if (event.data === 'setDateFormat') {
    let v =WdatePicker;
    WdatePicker=function(a,b){
      a['dateFmt']='yyyy-MM-dd HH:mm:ss';
      v(a,b);
    };
  }
});
window.postMessage('setDateFormat', '*');

然后在页面中的 JavaScript 中,调用代码将消息发送给内容脚本:

window.postMessage('setDateFormat', '*');

该问题是因为在 Chrome 浏览器中扩展插件的 JavaScript 代码是运行在独立的运行环境中,因此不能直接访问页面全局变量,必须在 manifest.json 中配置 “content_scripts” 并且指定运行在页面的哪些文件中。

请尝试在 manifest.json 中添加以下代码:

"content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": ["wdatepicker.js"],
      "run_at": "document_end"
    }
  ],

然后,将代码保存在一个单独的 JavaScript 文件中 (例如:wdatepicker.js),并在 manifest.json 中指定该文件。

如果仍然不能正常工作,请确保页面中已正确加载 WdatePicker 组件,并且能够在页面中正确使用该组件。

看起来您正试图在Chrome扩展中使用WdatePicker函数,但您遇到了WdatePicker未被定义的错误。这个错误可能是由于WdatePicker函数在Chrome扩展的上下文中不可用,它可能需要从外部加载。

为了解决这个问题,你需要在你的扩展中包含必要的JavaScript文件,其中包含WdatePicker函数。这可以通过在扩展的清单文件中的web_accessible_resources部分添加该文件来完成。

例如,如果包含WdatePicker功能的JavaScript文件位于./wdatepicker.js,你可以在清单文件中添加以下内容。

"web_accessible_resources": [
  "wdatepicker.js"
],

然后,在你的后台脚本或弹出式脚本中,你可以使用脚本标签加载该脚本。

var script = document.createElement('script');
script.src = chrome.runtime.getURL('wdatepicker.js');
document.head.appendChild(script);

这应该使 WdatePicker 函数在您的 Chrome 扩展程序中可用,并且您应该不会再收到“未定义”错误。

修改 WdatePicker.js 文件,$crossFrame:false, 值设成 false,试试。

首先确保 wdatepicker.js 文件已经被正确地引入到了插件中。如果是这样的话,这个问题通常是由于在插件的内部执行上下文中的变量的作用域的问题造成的。

在这种情况下,您可以通过使用 window 对象明确声明 WdatePicker 变量来解决问题:

(function(){
  let v = window.WdatePicker;
  window.WdatePicker = function(a,b){
    a['dateFmt']='yyyy-MM-dd HH:mm:ss';
    v(a,b);
  }
})()


或者您可以将代码放入全局作用域,以便在插件中访问它:

window.WdatePicker = function(a,b){
    a['dateFmt']='yyyy-MM-dd HH:mm:ss';
    window.WdatePicker.v(a,b);
  }

window.WdatePicker.v = window.WdatePicker.prototype.v;


不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

这个问题很可能是因为在Chrome插件的环境下,WdatePicker变量并未被定义。一种可能的解决方案是,将代码改为:

(function(){
   if (typeof WdatePicker !== 'undefined') {
      let v = WdatePicker;
      WdatePicker=function(a,b){
         a['dateFmt']='yyyy-MM-dd HH:mm:ss';
         v(a,b);
      }
   }
})()

这里添加了一个条件语句,只有在WdatePicker已经被定义的情况下才会运行代码。这样可以避免在Chrome插件环境下未定义的变量。另外,请确保在manifest文件中正确配置了脚本的权限和运行位置。

https://www.cnplugins.com/tool/

您可以尝试在manifest.json文件中添加以下代码,以允许您的插件访问外部资源:"permissions": ["https://.example.com/"]

可以使用jQuery UI的Datepicker替换wdatepicker,它的使用方式也很简单,具体可以参考官方文档:https://jqueryui.com/datepicker/