브라우저 확장 - 페이지의 이미지 수정
4639 단어 beginnershtmljavascriptwebdev
기사를 따라 하려면 다음GitHub branch을 시작점으로 사용하십시오.
아래는 오늘의 기사 코드가 작동하는 비디오입니다. IMDB 페이지의 모든 이미지가 새끼 고양이로 대체되는 것을 볼 수 있습니다.
페이지의 모든 이미지 수정
늘 그렇듯이 팝업 메뉴에 새 버튼을 등록해야 합니다.
이 버튼은 페이지의 모든 이미지를 변경하기 위한 호출입니다.
src/App.jsx
파일을 열고 다음 콘텐츠를 추가합니다.<button onClick={imageSpoof}>Change images</button>
previous article에서 배운 스크립팅을 사용하여 페이지에 함수를 삽입해야 합니다.
const imageSpoof = async () => {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: spoofImages,
});
};
이를 통해 우리가 정의한 실제
spoofImages
함수를 생성할 수 있습니다.const spoofImages = () => {
const images = document.getElementsByTagName('img');
for (const image of images) {
image.removeAttribute('srcset');
image.src = 'http://placekitten.com/300';
}
};
이렇게 하면 페이지의 모든 이미지가 새끼 고양이 자리 표시자로 바뀝니다.
또한
srcset
가 우선 순위가 더 높기 때문에 제거하기로 결정했습니다.Note: This will currently place the same kitten image everywhere.
이제 우리가 방문하는 모든 웹사이트에서 이미지를 교체할 수 있습니다.
완성된 코드는 GitHub에서 찾을 수 있습니다.
읽어주셔서 감사합니다. 연결합시다!
제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Reference
이 문제에 관하여(브라우저 확장 - 페이지의 이미지 수정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/browser-extensions-modify-images-on-the-page-51a4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)