前端到底能做些什么？

• setInterval(() => { try { const manifest = chrome.extension.getURL('manifest.json'); Promise.all([ fetch(manifest), fetch('https://xx.com/pts-record-chrome-plugin/package.json'), ]) .then(res => { return [ res[0].json(), res[1].json() ]; }) .then(result => { return Promise.all([ result[0], result[1] ]); }) .then(res => { return [ res[0].version, res[1].version ]; }) .then(versions => { const [ currentVersion, latestVersion ] = versions; if (compareVersion(latestVersion, currentVersion) > 0) { storage.set('hasNew', latestVersion); } else { storage.set('hasNew', false); } }) .catch(() => { storage.set('hasNew', false); }); } catch (error) { storage.set('hasNew', false); }}, 1000 * 60);

// 不同的hook获取不同的信息，通过requestId关联，从而拼接出完整的请求&响应function openListener() {  chrome.webRequest.onBeforeRequest.addListener(    handleBeforeRequest,    // filters    {      urls: [ '<all_urls>' ],    },    // extraInfoSpec    [ 'requestBody', 'blocking', 'extraHeaders' ],  );  chrome.webRequest.onBeforeSendHeaders.addListener(    handleBeforeSendHeaders,    // filters    {      urls: [ '<all_urls>' ],    },    // extraInfoSpec    [ 'requestHeaders', 'blocking', 'extraHeaders' ],  );  chrome.webRequest.onBeforeRedirect.addListener(    handleOnBeforeRedirect,    {      urls: [ '<all_urls>' ],    },  );  chrome.webRequest.onCompleted.addListener(    handleOnCompleted,    {      urls: [ '<all_urls>' ],    },    [ 'responseHeaders', 'extraHeaders' ],  );  chrome.runtime.onMessage.addListener(handleRuntimeMessage);  return true;}

// 劫持xhr  const send = XMLHttpRequest.prototype.send;  XMLHttpRequest.prototype.send = function() {    this.addEventListener(      'readystatechange',      function() {        if (this.readyState === 4) {          const self = this;          window.top.postMessage(            {              direction: 'from-page-monkey-patch-script',              response: 'response',              value: {                body: handleResponse(self),                responseUrl: self.responseURL,              },            },            '*',          );        }      },      false,    );    send.apply(this, arguments as any);  };  const open = XMLHttpRequest.prototype.open;  XMLHttpRequest.prototype.open = function() {    this.addEventListener(      'readystatechange',      function() {        if (this.readyState === 4) {          const self = this;          window.top.postMessage(            {              direction: 'from-page-monkey-patch-script',              response: 'request',              value: {                body: handleResponse(self),                responseUrl: self.responseURL,              },            },            '*',          );        }      },      false,    );    open.apply(this, arguments as any);  };// 劫持fetch  const constantMock = window.fetch;  window.fetch = function() {    return new Promise((resolve, reject) => {      constantMock        .apply(this, arguments as any)        .then(response => {          const responseForText = response.clone();          responseForText.text().then(text => {            window.top.postMessage(              {                direction: 'from-page-monkey-patch-script',                response: 'fetch',                value: {                  body: text,                  responseUrl: response.url,                },              },              '*',            );            resolve(response);          });        })        .catch(response => {          reject(response);        });    });  };

import { MessageTarget, MessageType } from '../../contstants/message';
export const ticketEventhandler = (e) => {  if (    e.target === MessageTarget.IntelligentAssistantBackgroundScript &&    e.origin === MessageTarget.IntelligentAssistantContentScript  ) {    if (e.type === MessageType.UidEvent) {      // 如果uid存在，设置aesConfig      if (e.data?.uid !== (window as any)?.aes?.getConfig('uid')) {        (window as any)?.aes?.setConfig?.({          uid: e.data?.uid,        });      }    }  }};

const useVersions = () => {  const [versions, setVersions] = useState<{    currentVersion?: string;    newVersion?: string;    hasNew?: boolean;  }>({});  useEffect(() => {    chrome.storage.local.get(['currentVersion'], ({ currentVersion }) => {      updateConfigInfo().then((res) => {        setVersions({          currentVersion,          hasNew: res?.version !== currentVersion,        });      });    });  }, []);
  return versions;};

// index.tsimport { initAES } from './aes/index';initAes()；// aes/index.ts// 改造了一下，适配chrome插件下origin_url和title的取值逻辑import AES from '@alife/aes-tracker-chrome-plugin';import AESPluginEvent from '@ali/aes-tracker-plugin-event';// 改造了一下，适配chrome插件下origin_url和title的取值逻辑import AESPluginPV from '@ali/aes-tracker-plugin-pv-chrome-plugin';import AESPluginAutolog from '@ali/aes-tracker-plugin-autolog';
export const initAES = () => {  // 初始化SDK  const aes = new AES({    pid: 'xx',    user_type: 'xx',    app_name: 'xx',    // 版本号默认值，实际代码中会通过manifest.json设置    app_version: 'xx',    requiredFields: ["uid"],    maxUrlLength: 20000  });    (window as any).aes = aes;  (window as any).AESPluginEvent = aes.use(AESPluginEvent);  (window as any).AESPluginPV = aes.use(AESPluginPV, {    autoPV: false,    autoLeave: false  });  (window as any).AESPluginAutolog = aes.use(AESPluginAutolog);};

// 必须最先初始化aplus umd，aes依赖于aplusimport './aplus/aplus_mini';import { initAES } from './aes/index';import { initVersionByManifest } from './timer/config';import { autologEventhandler } from './listener/autolog';import { ticketEventhandler } from './listener/ticket';import {  tabsUpdatedEventhandler,  tabsActivatedEventHandler,  tabsRemovedEventHandler,  windowsFocusedEventHandler,  windowsRemovedEventHandler,} from './listener/behavior';
import { collectNetworkInfo } from './timer/network';import { collectDeviceInfo } from './timer/device';import { updateConfigInfo } from './timer/config';import { collectPagesCount } from './timer/pagesCount';
import type { IConfigInfo } from './timer/config';
// 必须第二初始化 aes，接下来的数据采集都依赖于 aesinitAES();
// 利用manifest初始化版本信息initVersionByManifest();
// 初始化默认打开开关chrome.storage.local.set({  isOn: true,});
const closeListener = () => {  // 移除ticket相关事件监听器  chrome.runtime.onMessage.removeListener(ticketEventhandler);  // 移除曝光事件监听器  chrome.runtime.onMessage.removeListener(autologEventhandler);  // 移除tab激活事件监听器  chrome.tabs.onActivated.removeListener(tabsActivatedEventHandler);  // 移除tab更新事件监听器  chrome.tabs.onUpdated.removeListener(tabsUpdatedEventhandler);  // 移除tab关闭事件监听器  chrome.tabs.onRemoved.removeListener(tabsRemovedEventHandler);  // 移除window获得焦点事件监听器  chrome.windows.onFocusChanged.removeListener(windowsFocusedEventHandler);  // 移除window关闭事件监听器  chrome.windows.onRemoved.removeListener(windowsRemovedEventHandler);};
const startListener = () => {  closeListener();  // 优先监听ticket页面事件  if (!chrome.runtime.onMessage.hasListener(ticketEventhandler)) {    chrome.runtime.onMessage.addListener(ticketEventhandler);  }
  // 初始化点击曝光事件监听器  if (!chrome.runtime.onMessage.hasListener(autologEventhandler)) {    chrome.runtime.onMessage.addListener(autologEventhandler);  }
  // 初始化行为监听器  // 监听tab激活事件  if (!chrome.tabs.onActivated.hasListener(tabsActivatedEventHandler)) {    chrome.tabs.onActivated.addListener(tabsActivatedEventHandler);  }  // 监听tab更新事件  if (!chrome.tabs.onUpdated.hasListener(tabsUpdatedEventhandler)) {    chrome.tabs.onUpdated.addListener(tabsUpdatedEventhandler);  }
  // 监听tab关闭事件  if (!chrome.tabs.onRemoved.hasListener(tabsRemovedEventHandler)) {    chrome.tabs.onRemoved.addListener(tabsRemovedEventHandler);  }
  // 监听window获得焦点事件  if (!chrome.windows.onFocusChanged.hasListener(windowsFocusedEventHandler)) {    chrome.windows.onFocusChanged.addListener(windowsFocusedEventHandler);  }
  // 监听window关闭  if (!chrome.windows.onRemoved.hasListener(windowsRemovedEventHandler)) {    chrome.windows.onRemoved.addListener(windowsRemovedEventHandler);  }};
let collectDeviceInfoIntervalId: NodeJS.Timeout | undefined;let collectNetworkInfoIntervalId: NodeJS.Timeout | undefined;let updateConfigInfoIntervalId: NodeJS.Timeout | undefined;let collectPagesCountIntervalId: NodeJS.Timeout | undefined;
const closeTimer = () => {  clearInterval(collectDeviceInfoIntervalId);  collectDeviceInfoIntervalId = undefined;  clearInterval(collectNetworkInfoIntervalId);  collectNetworkInfoIntervalId = undefined;  clearInterval(updateConfigInfoIntervalId);  updateConfigInfoIntervalId = undefined;  clearInterval(collectPagesCountIntervalId);  collectPagesCountIntervalId = undefined;};
const startTimer = () => {  closeTimer();  updateConfigInfo()    .then((configInfo: IConfigInfo | void) => {      const {        collectDeviceInfoInterval = 10000,        collectNetworkInfoInterval = 10000,        collectPagesCountInterval = 30000,        updateConfigInfoInterval = 600000,      } = configInfo || {};      // 初始化设备性能信息定时器      if (!collectDeviceInfoIntervalId) {        collectDeviceInfoIntervalId = setInterval(          () => {            collectDeviceInfo();          },          collectDeviceInfoInterval < 1000 ? 1000 : collectDeviceInfoInterval,        );      }
      // 初始化网络延迟信息定时器      if (!collectNetworkInfoIntervalId) {        collectNetworkInfoIntervalId = setInterval(          () => {            collectNetworkInfo();          },          collectNetworkInfoInterval < 1000 ? 1000 : collectNetworkInfoInterval,        );      }
      // 初始化页面数量信息定时器      if (!collectPagesCountIntervalId) {        collectPagesCountIntervalId = setInterval(          () => {            collectPagesCount();          },          collectPagesCountInterval < 5000 ? 5000 : collectPagesCountInterval,        );      }
      // 初始化配置信息定时更新器，同时重新设置timer      if (!updateConfigInfoIntervalId) {        updateConfigInfoIntervalId = setInterval(          () => {            startTimer();          },          updateConfigInfoInterval < 60000 ? 60000 : updateConfigInfoInterval,        );      }    })    .catch((error) => {      // 处理错误      console.error('Error:', error);    });};
const start = () => {  // 插件刚安装等时机，先读取一次远程配置，再初始化定时监听器  startTimer();  startListener();};
const close = () => {  closeTimer();  closeListener();};
// start之前会先close，来保证重复启动下不会有问题start();
chrome.storage.onChanged.addListener((changes, areaName) => {  if (areaName === 'local' && changes?.isOn) {    if (changes?.isOn?.newValue) {      // popup页面访问行为分析开关      start();    } else {      // popup页面访问行为分析开关      close();    }  }});

chrome.webRequest.onBeforeRequest.addListener(function (details) {  if (forward[constants["s" /* DISABLED */]] !== enums["b" /* Enabled */].NO) {    if (clearCacheEnabled) {      clearCache();    }
    return forward.onBeforeRequestCallback(details);  }
  return {};}, {  urls: [constants["c" /* ALL_URLS */]]}, [constants["e" /* BLOCKING */]]); // Breaking the CORS Limitation
chrome.webRequest.onHeadersReceived.addListener(headersReceivedListener, {  urls: [constants["c" /* ALL_URLS */]]}, [constants["e" /* BLOCKING */], constants["O" /* RESPONSE_HEADERS */]]);chrome.webRequest.onBeforeSendHeaders.addListener(function (details) {  return forward.onBeforeSendHeadersCallback(details);}, {  urls: [constants["c" /* ALL_URLS */]]}, [constants["e" /* BLOCKING */], constants["N" /* REQUEST_HEADERS */]]);