저는 웹 프로그래밍에 익숙하지 않지만 일반적인 프로그래밍에는 익숙하지 않습니다. 사용자가 StackOverflow.com의 페이지를 방문 할 때마다 URL을 자동으로 저장하는 Google Chrome 확장 프로그램을 구축하려고합니다. 그런 다음 확장 팝업에 URL 목록을 표시하고 싶습니다.
지금까지 StackOverflow 페이지에서만 활성화되기를 원하기 때문에 페이지 작업 확장이 필요하다고 결정했습니다. 탭과 해당 URL에 액세스하는 다양한 방법을 알고 있지만 코드를 어디에 넣을지 모르겠습니다.
예를 들어 콘텐츠 스크립트 및 / 또는 배경 스크립트가 필요한지 잘 모르겠습니다. 또한 리스너와 콘텐츠 스크립트와 이벤트 페이지 또는 팝업 스크립트간에 메시지를 보내야하는지에 대해 꽤 혼란 스럽습니다. 이것이 내가 지금까지 가지고있는 것입니다.
manifest.json
"manifest_version": 2,
"name": "Stack Overflow visit history",
"version": "1.0",
"description": "This Chrome extension stores your Stack Overflow URL visits.",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"page_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html",
"default_title": "StackOverflowVisits"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://stackoverflow.com/*"],
"js": ["content.js", "jquery-3.5.1.min.js"]
}
],
"permissions": [
"webNavigation",
"tabs",
"https://stackoverflow.com/*"
]
}
popup.html
<html>
<head>
<title>Stack Overflow Visit History</title>
<style>
body {min-width: 250px;}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<h2>StackOverflowVisits</h2>
<div id="newUrlList"></div>
</body>
</html>
popup.js
var tabUrl = tabs[0].url;
chrome.storage.local.get({'urlList':[]}, function(item){
var newUrlList = item.urlList;
if (newUrlList.indexOf(tabUrl) === -1) {
newUrlList.push(tabUrl);
}
console.log(newUrlList);
chrome.storage.local.set({urlList: newUrlList});
});
});
content.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
chrome.extension.getBackgroundPage().console.log(tab.url);
chrome.storage.sync.set({tabId : tab.url})
});
콘텐츠 스크립트는 모든 확장 API에 액세스 할 수 없으며 액세스 할 수 없습니다 chrome.tabs.onUpdated( 자세한 내용 ).
이 경우 콘텐츠 스크립트가 필요하지 않습니다. 백그라운드 스크립트에 해당 리스너를 추가 할 수 있습니다.이 스크립트는로 설정되지 않은 경우 브라우저가 열려있는 전체 시간 동안 실행됩니다 persistent: false.
컨텍스트 간 통신 정보 :이 경우 백그라운드 스크립트와 팝업 만있는 경우 또는를 사용하여 팝업에서 백그라운드 스크립트에 액세스 chrome.extension.getBackgroundPage()할 수 있습니다. 단순히 스토어의 데이터를 백그라운드 스크립트에 저장하고 팝업이 열릴 때 저장하십시오. 실시간 업데이트를 찾고 있다면 통신 포트 또는 요청 / 응답 체계를 사용할 수 있습니다 ( 자세한 내용 ).
배경 스크립트 ( eventPage.js) 의 내용을 공유하지 않았기 때문에 이미이 작업을 수행했는지 모르겠지만 특정 페이지에 페이지 작업을 표시하려면 등록해야합니다. 자세한 내용을 확인할 수 있습니다. 여기 에 대한 세부 사항
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다