如何跟蹤所有用戶對 Jira 網站上按鈕的點擊

Question

我試圖在用戶按下按鈕時彈出一個包含按鈕名稱的警報，不僅是按鈕，還有標簽，現在的問題是按鈕內容有不同類型的嵌套，例如它可能是這樣的：

<button>
  <div>
   //content doesn't matter here
  </div>
  <div>
    <span>Button Name </span> I want to display this span inner text
   </div>
</button>

或者按鈕標簽只能有一個孩子......等等。 以下是三個可點擊元素的代碼：

• 在我想在警報窗口中顯示“創建項目”的第一個元素中：

• 並且一些按鈕的名稱是一個名為 aria-label 的屬性的值，如下所示：

• 在我想在警報窗口中顯示“項目”的第一個元素中

我編寫了以下代碼，問題是有時當我按下按鈕時，警報會顯示按鈕名稱，有時則不會，這是我的代碼：

// Queue implementation

class Queue
{
    constructor()
    {
        this.items=[];
    }

    // front function 
    front() 
    { 
        // returns the Front element of  
        // the queue without removing it. 
        if(this.isEmpty()) 
            return "No elements in Queue"; 
        return this.items[0]; 
    } 


    enqueue(element)
    {
        this.items.push(element);
    }

    dequeue()
    {
        if (this.isEmpty()) 
            return " Underflow";
        return this.items.shift();
    }

    isEmpty()
    {
        return this.items.length == 0;
    }
}


function BFS(node) {
    let q = new Queue();
    //let explored = new Set();
    q.enqueue(node);
    while (!q.isEmpty()) {
        let currentChild = q.front();   
        q.dequeue()
        let ChildBoy = currentChild.children;
        for (let i = 0 ; i <ChildBoy.length ; i++) {
            q.enqueue(ChildBoy[i]);
            console.log(ChildBoy[i]);
            //explored.add(ChildBoy[i]);
        }


        if (currentChild.textContent != null && currentChild.textContent != undefined && currentChild.textContent != "") 
        {
            alert("textContent"+ "  "+currentChild.textContent);
            break;
        }
        if (currentChild.getAttribute("aria-label") != "" && currentChild.getAttribute("aria-label") != null && currentChild.getAttribute("aria-label") != undefined) 
        {
            alert("aria-label-Content"+"   "+currentChild.getAttribute("aria-label")); 
        }
    }
}

let buttons = document.getElementsByTagName("button");
for (let index = 0; index < buttons.length; index++) {
    let button_i = buttons[index];
    button_i.addEventListener('click', function () {
       BFS(button_i) ;
    });

}



let hrefs = document.getElementsByTagName("a");
for (let index_1 = 0; index_1 < hrefs.length; index_1++) {
    let hrefs_j = hrefs[index_1];
    hrefs_j.addEventListener('click' , function()
    {
        BFS(hrefs_j);
    });

}

清單 json 文件是：

{
    "name" : "first extension",
    "version" : "1.0",
    "description" : "extension for track user",
    "permissions" : [
        "storage",
        "declarativeContent",
        "activeTab"
    ],
    "page_action" : {
        "default_popup" : "popup.html",
        "default_icon": {
            "16": "images/get_started16.png",
            "32": "images/get_started32.png",
            "48": "images/get_started48.png",
            "128": "images/get_started128.png"
          }

    },
    "background" : {
        "scripts" : 
        ["background.js"],
        "persistent" : true
    },
    "icons": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      },

      "content_scripts" :
      [
          {
            "matches" :["https://*.atlassian.net/*/*" , "https://*.atlassian.com/*" , "https://*.atlassian.net/*"],
            "js" : ["track.js"]
          }
      ],

    "manifest_version" : 2
}

這段代碼有什么問題？

Answer 1

解決方案對我來說似乎並不直接，因為您不知道所有可視按鈕的類或唯一標識符......

因此，我將提出一種方法。

首先在document上添加一個全局點擊事件列表，這樣您就可以跟蹤所有點擊並選擇您想要的。

像這樣的東西，一種查看您點擊的內容的簡單方法。 （也許你可以找到一個解決方案）

 document.addEventListener("click", function(event) { const elementType = event.target.tagName; console.log(elementType + ' clicked!'); });

 <div>Test1</div> <span>Test2</span><br> <button>Test3</button><br> <a>Test4</a><br> <button>Test5</button><br> <div> <button>Test6</button> </div> <p>Test7</p>

然后您將不得不以某種方式將按鈕列入白名單（因為您不能只使用標簽）

因此，為此我正在考慮創建XPath的數組或映射（如果可能）並驗證單擊的元素是否與您的白名單匹配。 只有這樣你才能得到文本。

注意：XPath 是 DOM 中節點的唯一路徑。 這也意味着您必須知道按鈕的所有 XPath。
通常 XPath 在性能方面不是輕量級的，但是如果您只在單擊時運行並找到優化的解決方案，那應該沒問題...

這是我正在談論的一個例子：

 // Using object for performance reasons. const ACCEPTED_XPATHS = { '/html/body/button[1]': 1, '/html/body/button[2]': 1, '/html/body/div[2]/button': 1, '/html/body/div[3]/div/span': 1 } document.addEventListener("click", function(event) { const element = event.target; const elementXPath = xpath(element); // You can use this to collect your accepted list: console.log('CLICKED PATH = ' + elementXPath); if (ACCEPTED_XPATHS[elementXPath]) { console.log('BUTTON CLICKED --- Button Text: ' + element.innerHTML); } }); // https://gist.github.com/iimos/e9e96f036a3c174d0bf4 function xpath(el) { if (typeof el == "string") return document.evaluate(el, document, null, 0, null) if (!el || el.nodeType != 1) return '' if (el.id) return "//*[@id='" + el.id + "']" var sames = [].filter.call(el.parentNode.children, function (x) { return x.tagName == el.tagName }) return xpath(el.parentNode) + '/' + el.tagName.toLowerCase() + (sames.length > 1 ? '['+([].indexOf.call(sames, el)+1)+']' : '') }

 <div>Test1</div> <span>Test2</span><br> <button>Test3</button><br> <a>Test4</a><br> <button>Test5</button><br> <div> <button>Test6</button> </div> <p>Test7</p> <div> <div> <span>THIS IS ALSO A BUTTON</span> </div> </div>

我現在沒有更好的主意，希望它有幫助:)