开发浏览器扩展：从前端URL提取文件名并在CMS中打开

嘿，这个需求我之前帮团队做过类似的工具，刚好可以给你分享一套可行的实现思路和代码参考：

需求拆解 #

咱们的核心目标就是打通前端图片到CMS编辑的快捷路径：

• 给页面上的图片添加专属右键菜单「在CMS中打开」
• 从图片URL里精准提取完整文件名（含扩展名）
• 自动跳转到CMS的对应页面，用文件名定位到目标图片并打开编辑界面

具体实现（以Chrome扩展为例） #

Chrome生态的扩展开发成本低，适配性也不错，咱们就以它为例：

1. 编写扩展清单文件（manifest.json） #

首先得配置扩展的基础信息和需要的权限：

{
  "manifest_version": 3,
  "name": "CMS图片快捷编辑",
  "version": "1.0",
  "description": "右键点击图片直接在CMS中打开编辑",
  "permissions": ["contextMenus", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

注意：manifest_version用3是目前的标准，图标文件可以自己准备几个尺寸的占位图就行。

2. 创建右键菜单（background.js） #

在后台脚本里创建只针对图片的右键菜单：

// 扩展加载时创建右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "openInCMS",
    title: "在CMS中打开",
    contexts: ["image"] // 只在图片上显示这个菜单
  });
});

3. 处理菜单点击事件，完成跳转 #

还是在background.js里，监听菜单点击，提取文件名并跳转：

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "openInCMS") {
    // 从图片URL中提取文件名
    const imageUrl = info.srcUrl;
    let filename = imageUrl.split('/').pop();
    // 处理带参数的URL（比如product.jpg?v=123）
    filename = filename.split('?')[0];
    
    // 替换成你的CMS搜索/编辑页面URL，这里假设CMS通过filename参数搜索
    const cmsEditUrl = `https://your-cms-domain.com/image-editor?search=${encodeURIComponent(filename)}`;
    
    // 在新标签页打开CMS页面
    chrome.tabs.create({ url: cmsEditUrl });
  }
});

关键细节提示 #

• 特殊URL处理：如果你的图片URL有哈希值或者复杂参数，记得调整文件名提取逻辑，确保拿到纯净的文件名
• CMS适配：如果你的CMS不是通过URL参数搜索，而是需要调用内部接口，可借助chrome.scripting向CMS页面注入脚本自动触发搜索
• 鉴权问题：确保CMS和前端页面共享会话（比如同域Cookie），不然跳转后可能需要重新登录

内容的提问来源于stack exchange，提问作者Mikklos