支持 web_accessible_resources 中的资源编译

[rhinonan]

目前的情况是：需要 插入 injected.js ，能插入。但是这个文件只能手写js，因为他没有经过vite的编译。

因为injected 的资源一般也需要在 web_accessible_resources 中配置，所以希望能够读取mainfest.json 中 web_accessible_resources 字段中的文件，也进行一下编译。

目前的做法是需要单独对这个文件编译一下，起两个vite ，不优雅。

要么就只能纯手写js, 但是文件的需要手动移动到dist文件，或者直接在dist里面编写。但这样对工程化很不友好。

[Jervis2049]

可以写个demo吗，然后上传到你的GITHUB仓库，我看看你现在的写法。

[rhinonan]

demo 在公司，有信息安全整不出来，我贴下主要代码。 我用的是你的example 里面的 vue 示例

如果不能理解，我再重新写一个DEMO

// content.ts 主要代码
window.onload = async () => {
  const el = document.querySelector('body');
  const sc = document.createElement('script');
  // 我需要获取页面中的js变量，所有只能插入这个js，并且这个资源需要在manifest -> web_accessible_resources 中声明
  // 这个js我希望ts编写，所以希望vite能够编译
  //
  const injected = chrome.runtime.getURL('content_script/injected.js');
  sc.src = injected;
  if (el) {
    el.appendChild(sc);
  }
}

/* manifest.json */
{
        ......,
    "web_accessible_resources": [
    {
        "resources": ["content_script/injected.js"],
        "matches": [
            "*://*/*",
            "<all_urls>"
        ]
      }
    ]
}

[Jervis2049]

demo 在公司，有信息安全整不出来，我贴下主要代码。 我用的是你的example 里面的 vue 示例

如果不能理解，我再重新写一个DEMO

// content.ts 主要代码
window.onload = async () => {
  const el = document.querySelector('body');
  const sc = document.createElement('script');
  // 我需要获取页面中的js变量，所有只能插入这个js，并且这个资源需要在manifest -> web_accessible_resources 中声明
  // 这个js我希望ts编写，所以希望vite能够编译
  //
  const injected = chrome.runtime.getURL('content_script/injected.js');
  sc.src = injected;
  if (el) {
    el.appendChild(sc);
  }
}

/* manifest.json */
{
        ......,
  "web_accessible_resources": [
  {
      "resources": ["content_script/injected.js"],
      "matches": [
          "*://*/*",
          "<all_urls>"
      ]
    }
  ]
}

好的，明白你意思了，之前确实没考虑到这种情况。

[Jervis2049]

@rhinonan 刚发布了0.0.7-beta.0 , 支持这个功能了，安装这个版本试下。

[rhinonan]

大佬牛逼，我现在就试一试

[rhinonan]

@Jervis2049 已经验证，能够正常编译。