angular - 尝试从 chrome 扩展向角度元素添加事件

Question

我正在构建 chrome 扩展来识别 IP 地址并从外部 API 获取一些报告。该扩展在常规 HTML 网站上运行良好，但是当我尝试在 Angular 网站上执行相同操作时，我无法访问 Angular 元素。我的目标是使用具有特定属性的特殊跨度标记包装每个 IP 地址正则表达式（在角度元素旁边工作正常）。

清单.json

{
    "name": "IP information on hover",
    "description": "IP information on hover",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": "hello_extensions.png"
    },
    "permissions": [
        "https://www.virustotal.com/",
        "http://www.virustotal.com/"
    ],
    "background": {
        "scripts": [
            "background.js",
            "utils.js"
        ],
        "persistent": false
    },
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "js": [
                "jquery-3.4.0.js",
                "contentScript.js"
            ],
            "css": [
                "style.css"
            ]
        }
    ]
}

contentScript.js

let ipRegEx = new RegExp(/\b((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|$)){4}\b/g);

console.log('Idan Asulin');
let elements = $("*").filter(function () {
    return ipRegEx.test($(this).text());
});

elements.each((index, element) => {                    // Iterates all elements which contains ip
    let content = $(element).text();
    let ipsArray = content.match(ipRegEx);
    ipsArray.forEach(ipAddress => {                    // Iterates all IPs in that element 
        content = content.replace(ipAddress, `<span class="ipAddress">${ipAddress}</span>`);
        $(element).html(content);
    });
});

$(".ipAddress").mouseover(event => {
    chrome.runtime.sendMessage({ data: event.target.innerHTML }, ipReport => {
        if (ipReport !== 'Error') {
            let title = `Malicious: ${ipReport.malicious},\nPositive downloads: ${ipReport.positiveDownloads},\nPositive URLs: ${ipReport.positiveURLs},\nAs owner: ${ipReport.asOwner}`;
            title = title.replace(/[ ]/g, "\u00a0");
            if (ipReport.malicious === true)
                event.target.setAttribute('data-title-malicious', title);
            else
                event.target.setAttribute('data-title-clean', title);
        }
    });
})

$('*').click( () => {
    console.log('Success');
    $(this).attr('idan', 'red');
})

背景脚本.js

chrome.runtime.onMessage.addListener((message, sender, callback) => {
    fetch(`http://www.virustotal.com/vtapi/v2/ip-address/report?ip=${message.data}&apikey=MY API KEY`, {
        strictSSL: false
    })
    .then(res => res.json())
    .then(data => {
        callback({
            malicious: data.response_code > 0,
            positiveDownloads: calcDownloads([data.detected_downloaded_samples, data.undetected_downloaded_samples]),
            positiveURLs: calcUrls(data.detected_urls),
            asOwner: data.as_owner
        });
    })
    .catch(() => {
        callback('Error');
    })
    return true;
});

最后，我想要的是让能力 wrap Ip 正则表达式出现在角度元素内

标签： angulargoogle-chrome-extension