Question

我的chrome扩展程序的用例是

用户加载他/她的电子邮件后，内容脚本应该从已打开的邮件中读取文本，并查找电子邮件中的任何文本是否与提供的主题对象匹配。如果匹配，则应该将该文本创建为url。例如，如果我的主题对象是

var topic = [{
 'name': 'Hello'
},
{'name': 'how are'}
]

在我打开的邮件页面中，如果有一个名为＆＃39; hello＆＃39;，那么该文本应该转换为超链接你好。

original -> Hello world, how are you. This is the dummy text.

那么它应该是

<a href="https://www.google.com/search/?q=Hello">Hello</a> world, <a href="https://www.google.com/search/?q=how are you">how are you</a>. This is the dummy text

我不知道所以我在谷歌研究并在stackoverflow中找到了一个答案。我试过这个代码来理解，但它对我不起作用。我试图了解树木行走，但无法使它工作。这是我复制的内容

content_script.js（我承认它为copied code）

此处node.textContent未获取电子邮件主题和正文。

function onLoad() {
    console.log('loaded');
    // document.addEventListener('click', init);
    var re = /Mumbai/g;
    var regs;

    var walker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_TEXT,
        function(node) {
            if ((regs = re.exec(node.textContent))) {
                if (!node.parentNode.classList.contains('highlighted_text')) {
                    var match = document.createElement('A');
                    match.appendChild(document.createTextNode(regs[0]));
                    match.href = 'http://www.url.com/';

                    // add an attribute so we know this element is one we added
                    // Im using a class so you can target it with css easily
                    match.classList.add('highlighted_text');

                    var after = node.splitText(regs.index);
                    after.nodeValue = after.nodeValue.substring(regs[0].length);
                    node.parentNode.insertBefore(match, after);
                }
            }
            return NodeFilter.FILTER_SKIP;
        },
        false
    );

    // Make the walker step through the nodes
    walker.nextNode();

    // and it ends here
}

    if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', onLoad);
} else {
    onLoad();
}

这是清单

"background": {
  "scripts": [
    "extension/js/background.js"
  ],
  "persistent": true
},
"options_page": "index.html",
"content_scripts": [
  {
    "matches": ["https://mail.google.com/*", "http://mail.google.com/*"],
    "js": ["extension/js/content.js"],
    "css": ["extension/css/main.css"]
  }
],
"permissions": [
  "contextMenus",
  "tabs",
  "storage",
  "https://mail.google.com/*",
  "http://mail.google.com/*"
],

Answer 1

这是一个演示扩展，您可以根据它来检查并实现逻辑到您自己的扩展。

例如，此扩展程序会将页面中找到的每个"da"转换为一个链接，在这种情况下为"http://www.url.com/"。

加载整个页面时会运行一次，然后在每次哈希更改时运行（当你打开新邮件时）。

注意：您需要下载jQuery才能使扩展程序正常运行。

<强>的manifest.json：

{
  "manifest_version": 2,

  "name": "Example",
  "version": "1.0",

  "content_scripts": [{
    "matches": ["*://mail.google.com/*"],
    "js": ["jquery-3.3.1.min.js", "content.js"]
  }]
}

<强> Content.js

function searchPage() {

    var re = /da/g; // example regex that the function will use for search
    var regs;

    var walker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_TEXT,
        function(node) {
            if ((regs = re.exec(node.textContent))) {
                if (!node.parentNode.classList.contains('highlighted_text')) {
                    var match = document.createElement('A');
                    match.appendChild(document.createTextNode(regs[0]));
                    match.href = 'http://www.url.com/';

                    // add an attribute so we know this element is one we added
                    // Im using a class so you can target it with css easily
                    match.classList.add('highlighted_text');

                    var after = node.splitText(regs.index);
                    after.nodeValue = after.nodeValue.substring(regs[0].length);
                    node.parentNode.insertBefore(match, after);
                }
            }
            return NodeFilter.FILTER_SKIP;
        },
        false
    );

    walker.nextNode();
}

// Run when the whole document loads
$(window).bind("load", function() {
    searchPage();
});

// Run on every hash change (when opening new mail)
$(window).on('hashchange', function() {
    searchPage();
});

如果文本与提供的对象匹配，则超链接

1 个答案: