Chrome扩展开发：如何匹配span文本并设置对应链接属性？

问题描述 #

开发Chrome扩展时，需要实现：遍历页面中带有badge-tag类的<span>元素，提取其内部子<span>的文本，当文本与预设对象的键匹配时，将该文本转为对应URL的超链接。页面标签结构示例：

<span class="badge-tag"><span>facebook</span></span>
<span class="badge-tag"><span>youtube</span></span>
<span class="badge-tag"><span>twitter</span></span>
<span class="badge-tag"><span>bing</span></span>

现有代码会将所有badge-tag元素转为超链接，无法实现仅匹配预设键的功能，原代码如下：

if(typeof listitems === 'undefined'){
    const init = function(){
        const listitems = document.getElementsByClassName("badge-tag");
        const tagMap = {
            "facebook":"https://google.com",
            "youtube":"https://youtube.com",
            "test/obj":"https://docs.gorgias.com",
            "instagram/dm":"https://instagram.com"
        };
        
        //   console.log(tagMap['facebook'])
         
        if(text in tagMap){
            console.log("ok")
        }
        Object.values(listitems).forEach(item => {
            const text = item.firstChild;
            const link = document.createElement('a');
            link.setAttribute("href", tagMap); //test link.setAttribute("href", "https://google.com");
            link.setAttribute("target", "_blank");
            item.appendChild(link);
            link.appendChild(text);
            // document.querySelectorAll('.badge-tag a')
            // .forEach(function(elem){
            //   elem.setAttribute('target','_blank');
            //           })
                  }
              )
    }
    init();
}

问题分析 #

原代码存在以下问题：

• 未对每个标签文本做匹配判断，直接遍历所有元素生成超链接
• 错误地将整个tagMap对象赋值给href属性，而非对应键的URL
• 提前写的匹配判断代码未生效，因为text变量未在该作用域定义

修改后的代码 #

if (typeof listitems === 'undefined') {
    const init = function() {
        const listitems = document.getElementsByClassName("badge-tag");
        const tagMap = {
            "facebook": "https://google.com",
            "youtube": "https://youtube.com",
            "test/obj": "https://docs.gorgias.com",
            "instagram/dm": "https://instagram.com"
        };

        Object.values(listitems).forEach(item => {
            // 获取子span的文本并去除首尾空格
            const tagText = item.querySelector('span').textContent.trim();
            // 仅处理tagMap中存在的标签
            if (tagMap.hasOwnProperty(tagText)) {
                const link = document.createElement('a');
                // 设置对应URL
                link.href = tagMap[tagText];
                link.target = "_blank";
                // 将原span移动到链接内
                const originalSpan = item.querySelector('span');
                link.appendChild(originalSpan);
                item.appendChild(link);
            }
        });
    };
    init();
}

修改说明 #

• 提取子<span>文本时去除首尾空格，避免因空白字符导致匹配失败
• 使用hasOwnProperty判断文本是否在预设对象的键中，仅处理匹配项
• 正确为超链接赋值对应URL，而非整个对象
• 保留原<span>元素并移动到超链接内，确保原有样式不受影响

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