feat: 更新 version 版本号注入方式，角色 CSP 问题

fix #76

Author: GreatAuk

.gitignore

@@ -3,6 +3,7 @@
 .idea
 *.log
 *.tgz
+.turbo
 coverage
 dist
 lib-cov

.npmrc

@@ -1,2 +1,3 @@
 ignore-workspace-root-check=true
-registry=https://registry.npmjs.org
+registry=https://registry.npmjs.org
+strict-peer-dependencies=false

packages/core/src/constant.ts

@@ -3,6 +3,7 @@ export const JSON_FILE_NAME = 'web_version_by_plugin'
 export const INJECT_STYLE_FILE_NAME = 'webUpdateNoticeInjectStyle'
 /** .global is iife suffix */
 export const INJECT_SCRIPT_FILE_NAME = 'webUpdateNoticeInjectScript.global'
+export const INJECT_SCRIPT_TAG_ID = '_pwun_'
 export const CUSTOM_UPDATE_EVENT_NAME = 'plugin_web_update_notice'
 export const NOTIFICATION_ANCHOR_CLASS_NAME = 'plugin-web-update-notice-anchor'
 

packages/core/src/injectScript.ts

@@ -2,6 +2,7 @@ import type { LocaleData, Options, VersionJSON } from './type'
 import {
   CUSTOM_UPDATE_EVENT_NAME,
   DIRECTORY_NAME,
+  INJECT_SCRIPT_TAG_ID,
   JSON_FILE_NAME,
   LOCAL_STORAGE_PREFIX,
   NOTIFICATION_ANCHOR_CLASS_NAME,
@@ -64,6 +65,21 @@ window.pluginWebUpdateNotice_ = {
   },
 }
 
+/**
+ * Get the version from the script tag
+ */
+function getLocaleVersion() {
+  const script = document.querySelector(`script[data-id="${INJECT_SCRIPT_TAG_ID}"]`)
+  if (!script)
+    return ''
+  const version = script.getAttribute('data-v')
+  if (!version)
+    return ''
+
+  window.pluginWebUpdateNotice_version = version
+  return version
+}
+
 /**
  * It checks whether the system has been updated and if so, it shows a notification.
  * @param {Options} options - Options
@@ -78,6 +94,7 @@ function __checkUpdateSetup__(options: Options) {
     checkOnLoadFileError = true,
   } = options
   const checkSystemUpdate = () => {
+    const localeVersion = getLocaleVersion()
     window
       .fetch(`${injectFileBase}${DIRECTORY_NAME}/${JSON_FILE_NAME}.json?t=${Date.now()}`)
       .then((response) => {
@@ -90,7 +107,7 @@ function __checkUpdateSetup__(options: Options) {
         if (silence)
           return
         latestVersion = versionFromServer
-        if (window.pluginWebUpdateNotice_version !== versionFromServer) {
+        if (localeVersion !== versionFromServer) {
           // dispatch custom event
           document.body.dispatchEvent(new CustomEvent(CUSTOM_UPDATE_EVENT_NAME, {
             detail: {

packages/umi-plugin/src/index.ts

@@ -5,6 +5,7 @@ import type { Options } from '@plugin-web-update-notification/core'
 import {
   DIRECTORY_NAME,
   INJECT_SCRIPT_FILE_NAME,
+  INJECT_SCRIPT_TAG_ID,
   INJECT_STYLE_FILE_NAME,
   JSON_FILE_NAME,
   NOTIFICATION_ANCHOR_CLASS_NAME,
@@ -17,10 +18,6 @@ import { name as pkgName } from '../package.json'
 
 export type { Options } from '@plugin-web-update-notification/core'
 
-const injectVersionTpl = (version: string) => {
-  return `window.pluginWebUpdateNotice_version = '${version}';`
-}
-
 export default (api: IApi) => {
   api.describe({
     key: 'webUpdateNotification',
@@ -103,17 +100,6 @@ export default (api: IApi) => {
     ]
   })
 
-  api.addHTMLHeadScripts(() => {
-    const scriptList = []
-    scriptList.push({
-      content: injectVersionTpl(version),
-    })
-    scriptList.push({
-      src: `${injectFileBase}${DIRECTORY_NAME}/${INJECT_SCRIPT_FILE_NAME}.${jsFileHash}.js`,
-    })
-    return scriptList
-  })
-
   api.onBuildComplete(() => {
     const outputPath = resolve(api.userConfig.outputPath || 'dist')
     mkdirSync(`${outputPath}/${DIRECTORY_NAME}`)
@@ -131,6 +117,9 @@ export default (api: IApi) => {
   api.modifyHTML(($) => {
     if (!hiddenDefaultNotification)
       $('body').append(`<div class="${NOTIFICATION_ANCHOR_CLASS_NAME}"></div>`)
+
+    $('head').prepend(`<script data-id="${INJECT_SCRIPT_TAG_ID}" data-v="${version}" src="${injectFileBase}${DIRECTORY_NAME}/${INJECT_SCRIPT_FILE_NAME}.${jsFileHash}.js"></script>`)
+
     return $
   })
 }

packages/vite-plugin/src/index.ts

@@ -6,6 +6,7 @@ import type { Options } from '@plugin-web-update-notification/core'
 import {
   DIRECTORY_NAME,
   INJECT_SCRIPT_FILE_NAME,
+  INJECT_SCRIPT_TAG_ID,
   INJECT_STYLE_FILE_NAME,
   JSON_FILE_NAME,
   NOTIFICATION_ANCHOR_CLASS_NAME,
@@ -41,16 +42,14 @@ function injectPluginHtml(
 ) {
   const { customNotificationHTML, hiddenDefaultNotification, injectFileBase = '' } = options
 
-  const versionScript = `<script>window.pluginWebUpdateNotice_version = '${version}';</script>`
   const cssLinkHtml = customNotificationHTML || hiddenDefaultNotification ? '' : `<link rel="stylesheet" href="${injectFileBase}${DIRECTORY_NAME}/${INJECT_STYLE_FILE_NAME}.${cssFileHash}.css">`
   let res = html
 
   res = res.replace(
     '<head>',
     `<head>
     ${cssLinkHtml}
-    <script src="${injectFileBase}${DIRECTORY_NAME}/${INJECT_SCRIPT_FILE_NAME}.${jsFileHash}.js"></script>
-    ${versionScript}`,
+    <script data-id="${INJECT_SCRIPT_TAG_ID}" data-v="${version}" src="${injectFileBase}${DIRECTORY_NAME}/${INJECT_SCRIPT_FILE_NAME}.${jsFileHash}.js"></script>`,
   )
 
   if (!hiddenDefaultNotification) {

packages/webpack-plugin/src/index.ts

@@ -5,6 +5,7 @@ import type { Options } from '@plugin-web-update-notification/core'
 import {
   DIRECTORY_NAME,
   INJECT_SCRIPT_FILE_NAME,
+  INJECT_SCRIPT_TAG_ID,
   INJECT_STYLE_FILE_NAME,
   JSON_FILE_NAME,
   NOTIFICATION_ANCHOR_CLASS_NAME,
@@ -39,17 +40,14 @@ function injectPluginHtml(
 ) {
   const { customNotificationHTML, hiddenDefaultNotification, injectFileBase = '/' } = options
 
-  const versionScript = `<script>window.pluginWebUpdateNotice_version = '${version}';</script>`
   const cssLinkHtml = customNotificationHTML || hiddenDefaultNotification ? '' : `<link rel="stylesheet" href="${injectFileBase}${DIRECTORY_NAME}/${INJECT_STYLE_FILE_NAME}.${cssFileHash}.css">`
   let res = html
 
   res = res.replace(
     '<head>',
     `<head>
     ${cssLinkHtml}
-    <script src="${injectFileBase}${DIRECTORY_NAME}/${INJECT_SCRIPT_FILE_NAME}.${jsFileHash}.js"></script>
-
-    ${versionScript}`,
+    <script data-id="${INJECT_SCRIPT_TAG_ID}" data-v="${version}" src="${injectFileBase}${DIRECTORY_NAME}/${INJECT_SCRIPT_FILE_NAME}.${jsFileHash}.js"></script>`,
   )
 
   if (!hiddenDefaultNotification) {