-
Notifications
You must be signed in to change notification settings - Fork 0
/
content.js
209 lines (147 loc) · 7.95 KB
/
content.js
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
// message.message gets the string from popup.js
if (message.message === 'modify_article') {
// Get all img elements on the page
const images = document.querySelectorAll('img');
// Loop through each image element and set its loading attribute to "eager"
function setEagerLoading() {
return new Promise((resolve) => {
let imagesLoaded = 0;
function checkAndResolve() {
imagesLoaded++;
if (imagesLoaded === images.length) {
resolve();
}
}
images.forEach((image, index) => {
image.setAttribute("loading", "eager");
if (image.complete) {
checkAndResolve();
} else {
image.addEventListener("load", () => {
checkAndResolve();
});
}
});
});
}
async function getArticleData() {
//Wait for set eager loading to finish
await setEagerLoading();
// Get all the article media elements
const articleMediaElements = document.querySelectorAll('.dhks__background img, .dhks__background > video:first-of-type');
// Get all the article text elements, including the title
const articleTextElements = document.querySelectorAll('.dhks__card .dhks__text, .dhks__content, .dhks__title, .dhks__lead, .dhks__author-name, dhks__author-role, dhks__publish-date');
// Create an empty array to store the image, title, and text objects
const articleData = [];
// Initialize the current index to -1
let currentIndex = -1;
// Iterate through the text elements and extract the text content and data-card-index
articleTextElements.forEach((textElement, index) => {
// Get the data-card-index of the text element
const dataCardIndex = textElement.parentElement.getAttribute('data-card-index');
// Check if the data-card-index has reset to 0
if (dataCardIndex === '0') {
currentIndex++;
}
// Get the corresponding media element and extract the src attribute
const mediaElement = articleMediaElements[currentIndex];
if (!mediaElement) {
console.warn(`No media element found for index ${currentIndex}`);
return;
}
const mediaSrc = mediaElement.tagName.toLowerCase() === 'img' ? mediaElement.currentSrc : mediaElement.querySelector('source[type="video/mp4"]').src;
// Get the text content and store it in the articleData array
const textContent = textElement.textContent.trim();
// If the current index in the articleData array does not exist yet,
// create it and push the object with mediaSrc and textContent to it.
const mediaType = mediaElement.tagName.toLowerCase() === 'img' ? 'image' : mediaElement.tagName.toLowerCase() === 'video' ? 'video' : null;
if (!articleData[currentIndex]) {
articleData[currentIndex] = {
mediaType,
mediaSrc,
textContent: [textContent || ''] // Add an empty string if textContent is falsy
};
} else {
articleData[currentIndex].textContent.push(textContent || ''); // Add an empty string if textContent is falsy
}
// If the current index has no text but the previous index does, add the current image to the previous index
if (!textContent && articleData[currentIndex - 1] && articleData[currentIndex - 1].mediaSrc === mediaSrc) {
articleData[currentIndex - 1].textContent.push('');
}
});
// Create a new div element to hold the article
const articleDiv = document.createElement('div');
articleDiv.style.margin = '0 auto';
articleDiv.style.maxWidth = '800px';
articleDiv.style.padding = '30px';
articleDiv.style.fontFamily = 'Arial, sans-serif';
const topDiv = document.createElement('div');
topDiv.style.display = 'flex';
topDiv.style.justifyContent = 'space-between';
topDiv.style.alignItems = 'center';
topDiv.style.color = '#A9A9A9';
topDiv.style.borderBottom = '1px solid #ccc';
topDiv.style.paddingBottom = '30px';
const profileDiv = document.createElement('div');
profileDiv.style.display = 'flex';
profileDiv.style.justifyContent = 'space-between';
profileDiv.style.float = 'left';
const profileImage = document.createElement('img');
profileImage.src = 'https://thumbs2.imgbox.com/c3/65/2ewp5PM2_t.png';
profileImage.style.width = '100px';
profileImage.style.height = '100px';
profileImage.style.borderRadius = '50%';
profileImage.style.marginLeft = '10px';
profileImage.style.marginTop = '10px';
profileDiv.appendChild(profileImage);
topDiv.appendChild(profileDiv);
// Iterate through the article data and create HTML elements for each item
articleData.forEach((item) => {
// Create a new div element to hold the image and text
const itemDiv = document.createElement('div');
itemDiv.style.display = 'flex';
itemDiv.style.flexDirection = 'column';
itemDiv.style.alignItems = 'center';
itemDiv.style.marginBottom = '30px';
// Creates the media element
let mediaElement;
if (item.mediaType === 'image') {
mediaElement = document.createElement('img');
mediaElement.src = item.mediaSrc;
mediaElement.style.width = '100%';
mediaElement.style.maxWidth = '800px';
mediaElement.style.height = 'auto';
mediaElement.style.marginBottom = '20px';
} else if (item.mediaType === 'video') {
mediaElement = document.createElement('video');
mediaElement.src = item.mediaSrc;
mediaElement.style.width = '100%';
mediaElement.style.maxWidth = '800px';
mediaElement.style.height = 'auto';
mediaElement.style.marginBottom = '20px';
mediaElement.controls = true;
}
// Create a new div element to hold the text
const textDiv = document.createElement('div');
textDiv.style.textAlign = 'center';
// Iterate through the text content for this item and create paragraphs for each
item.textContent.forEach((text) => {
const pElement = document.createElement('p');
pElement.textContent = text;
textDiv.appendChild(pElement);
});
// Add the media element and text to the item div, and add the item div to the article div
itemDiv.appendChild(mediaElement);
itemDiv.appendChild(textDiv);
articleDiv.appendChild(itemDiv);
});
// Replace the page content with the article div
const body = document.querySelector('body');
body.innerHTML = '';
body.appendChild(topDiv);
body.appendChild(articleDiv);
}
getArticleData();
}
});