浏览器标签页工具插件

manifest.json

{
  "name": "TabTool",
  "description": "修改 localhost 网页 title",
  "version": "0.1.0",
  "manifest_version": 3,
  "permissions": ["storage", "tabs", "activeTab", "scripting"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": "icons/smile.png",
    "default_title": "标签页工具"
  },
  "icons": { "128": "icons/smile.png" }
}

background.js

/**
 * 可用的注册权限见 https://developer.chrome.com/docs/extensions/mv3/declare_permissions/
 * 注册之后才会在 chrome 对象中可见
 * 与 manifest.json 一样，background.js 必须放在根目录
 */
chrome.runtime.onInstalled.addListener(function () {
  console.log('chrome 对象')
  console.log(chrome)

  // 给图标添加标记文本
  chrome.action.setBadgeText({ text: '0.1' })
  // 设置标记文本颜色
  chrome.action.setBadgeBackgroundColor({ color: [255, 0, 0, 255] })
})

// 监听 Tab 页面加载状态，添加处理事件
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 设置判断条件，页面加载完成才添加事件，否则会导致事件重复添加触发多次
  url = tab.url
  if (changeInfo.status === 'complete' && /^http:\/\/localhost/.test(url)) {
    console.log(tabId, url)
    chrome.scripting
      .executeScript({
        target: { tabId: tabId },
        files: ['content-script.js'],
      })
      .then(() => {
        console.log('INJECTED SCRIPT SUCC.')
      })
      .catch((err) => console.log(err))
    // // 获取当前标签页的 URL
    // console.log(url)

    // // 转换成需要的 title

    // // 修改标签页的 title
    // tab.title = 'pr'
    // console.log(tab.title)
    // document.title = 'ha'
    // console.log(document.title)
  }
})

content-script.js

console.log(content)
const { url } = await chrome.storage.sync.get('url')

console.log('url')
document.title = 'ma'
console.log(document.title)