といいつつ5分で終わりました。
SEOをやっていると、
あるサイトを開いている時に
「このサイトのキーワード数っていくつだろう、あとサイト内部のリンクと外部のリンクっていくつだろう」と考え、地道にカウントするということありますよね？
それを1秒で解決するextentionを今カップラーメンを食べながら開発しました。
まずあなたのPCのどこかに「counterkajimura」というフォルダを作り
そこに
background.jsを描きます。
chrome.runtime.onInstalled.addListener(() => {
console.log('Keyword Counter extension installed.');
});
// Optionally, handle activation when the user clicks on the extension icon
chrome.action.onClicked.addListener((tab) => {
console.log('Extension icon clicked:', tab.url);
});次に、
manifest.jsonを書きます。
{
"manifest_version": 3,
"name": "Keyword Counter",
"version": "1.0",
"description": "Counts the occurrences of specified keywords on the current page.",
"permissions": ["activeTab", "scripting"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon.png"
}
},
"background": {
"service_worker": "background.js"
}
}次に
vim popup.html を作ります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.keyword-input { margin: 5px 0; }
</style>
</head>
<body>
<div id="form-container">
<div class="keyword-input">
<input type="text" placeholder="Enter keyword" class="keyword">
<span class="count-result"></span>
</div>
</div>
<button id="add-button">+</button>
<button id="count-button">カウントする</button>
<button id="link-count-button">リンク数</button>
<div id="link-count-result">
<!-- This will display the link counts -->
</div>
<script src="popup.js"></script>
</body>
</html>そして最後に
popup.jsを作ります。
// Add event listener for adding keyword input
document.getElementById('add-button').addEventListener('click', () => {
const container = document.getElementById('form-container');
const newInput = document.createElement('div');
newInput.className = 'keyword-input';
newInput.innerHTML = `
<input type="text" placeholder="Enter keyword" class="keyword">
<span class="count-result"></span>
`;
container.appendChild(newInput);
});
// Add event listener for keyword count
document.getElementById('count-button').addEventListener('click', () => {
const keywords = Array.from(document.querySelectorAll('.keyword')).map(input => input.value);
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
func: countKeywords,
args: [keywords]
}, (results) => {
const counts = results[0].result;
document.querySelectorAll('.keyword-input').forEach((inputDiv, index) => {
inputDiv.querySelector('.count-result').textContent = `Count: ${counts[index]}`;
});
});
});
});
// Function to count keywords
function countKeywords(keywords) {
return keywords.map(keyword => (document.body.innerText.match(new RegExp(keyword, 'gi')) || []).length);
}
// Add event listener for link count
document.getElementById('link-count-button').addEventListener('click', () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
func: countLinks,
args: [tabs[0].url]
}, (results) => {
const { sameDomainCount, diffDomainCount } = results[0].result;
document.getElementById('link-count-result').innerHTML = `
同じドメインは${sameDomainCount}個<br>
違うドメインは${diffDomainCount}個
`;
});
});
});
// Function to count links on the current page
function countLinks(currentUrl) {
const currentDomain = new URL(currentUrl).hostname;
const links = document.querySelectorAll('a');
let sameDomainCount = 0;
let diffDomainCount = 0;
links.forEach(link => {
// Handle links with full URLs, relative paths, or anchor links
let linkHref;
try {
linkHref = new URL(link.href, currentUrl); // Create a full URL based on the page URL
} catch (e) {
return; // Skip invalid URLs
}
const linkDomain = linkHref.hostname;
if (linkDomain === currentDomain) {
sameDomainCount++;
} else {
diffDomainCount++;
}
});
return { sameDomainCount, diffDomainCount };
}そして、
chrome://extensions/
にアクセスし、パッケージ化されていない拡張機能を選択し、
先ほど作ったcounterkajimuraフォルダを読み込ませると
はい、あなたのChromeのブックマークにextentionがでてきました。
神ですね。
