linkedin-colors-extension/content.js at main · serenichron/linkedin-colors-extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
// Function to inject CSS into the page head
function injectStyles() {
    const style = document.createElement("style");
    style.textContent = `
        .msg-color-case1 .msg-conversation-card__title-row {
            background-color: orange !important;
        }
        .msg-color-case2 .msg-conversation-card__title-row {
            background-color: #f1eb97 !important; /* Light orange */
        }
        .msg-color-case3 {
            opacity: 0.2 !important;
        }
        .msg-color-case3:has(.msg-conversations-container__convo-item-link--active) {
            opacity: 0.5 !important;
        }
        .adjust-height {
            min-height: 20px !important;
            height: 20px !important;
            overflow: hidden !important;
            border-bottom: 1px solid #eaeaea !important;
            border-top: 1px solid #eaeaea !important;
        }
        .adjust-padding .msg-conversation-card__content--selectable {
            padding-top: 0px !important;
        }
    `;
    document.head.appendChild(style);
}

// Function to apply styles using CSS classes
function applyStyles() {
    document.querySelectorAll(".msg-conversation-card__message-snippet").forEach(function (element) {
        const text = element.textContent;
        let matched = false;

        // Get the closest relevant elements
        const parentLi = element.closest("li.msg-conversations-container__pillar");
        const titleRow = element.closest(".msg-conversation-card")?.querySelector(".msg-conversation-card__title-row");

        if (!parentLi || !titleRow) return; // Ensure elements exist

        // Remove previous classes to avoid duplication
        parentLi.classList.remove("msg-color-case1", "msg-color-case2", "msg-color-case3", "adjust-height", "adjust-padding");

        if (text.includes("I sent you a message yesterday about") || text.includes("I sent you a message yesterday about exploring the challenges faced by growing businesses") || text.includes("I came across your profile and thought it’d be great to connect! Always enjoy meeting professionals in the")) {
            parentLi.classList.add("msg-color-case1");
            matched = true;
        }

        if (text.includes("What do you say?") || text.includes("You can grab a time here") || text.includes("I always enjoy hearing what others are focused on — curious to know what’s keeping you busy!")) {
            parentLi.classList.add("msg-color-case2");
            matched = true;
        }

        if (text.includes("Thanks for your time, and I hope to connect soon") || text.includes("I always enjoy connecting with professionals in different spaces and seeing where the conversation goes.") || text.includes("https://www.linkedin.com/posts/vladtudorie_mondaymotivation-businesssuccess-leadershipmindset-activity")) {
            parentLi.classList.add("msg-color-case3");
            matched = true;
        }

        // Apply height and padding adjustments if any case matched
        if (matched) {
            parentLi.classList.add("adjust-height", "adjust-padding");
        }
    });
}

// Function to reset styles by removing added classes
function resetStyles() {
    document.querySelectorAll("li.msg-conversations-container__pillar").forEach(function (element) {
        element.classList.remove("msg-color-case1", "msg-color-case2", "msg-color-case3", "adjust-height", "adjust-padding");
    });
    applyStyles();
}

// Function to add the reset button
function addResetButton() {
    const container = document.querySelector(".msg-cross-pillar-inbox-top-bar-wrapper__container .flex-grow-1");
    if (container && !document.getElementById("reset-colors-button")) {
        const button = document.createElement("button");
        button.id = "reset-colors-button";
        button.textContent = "Reset Colors";
        button.style.marginLeft = "10px";
        button.style.padding = "5px 10px";
        button.style.cursor = "pointer";
        button.style.border = "1px solid #ccc";
        button.style.backgroundColor = "#f8f8f8";
        button.style.borderRadius = "5px";
        button.addEventListener("click", resetStyles);
        container.appendChild(button);
    }
}

// Run initially
injectStyles();
applyStyles();
addResetButton();

// MutationObserver to detect new messages
const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.type === "childList") {
            applyStyles();
            addResetButton();
        }
    });
});

// Observe the conversation list container for changes
const waitForContainer = setInterval(() => {
    const conversationContainer = document.querySelector(".msg-conversations-container__conversations-list");
    if (conversationContainer) {
        observer.observe(conversationContainer, { childList: true, subtree: true });
        clearInterval(waitForContainer);
    }
}, 1000);

// Trigger reset button when .msg-form__send-button is clicked
document.addEventListener("click", function (event) {
    if (event.target.closest(".msg-form__send-button")) {
        document.getElementById("reset-colors-button")?.click();
    }
});