MS 사이트의 docs 및 support 페이지 언어를 변환하는 Chrome 확장 프로그램을 만들려고했습니다.
12483 단어 edge자바스크립트chrome-extensionMicrosoft
개요
Microsoft의 docs나 support 페이지에서는, 일본어에서는 URL이/ja-jp/영어에서는/en-us/입니다만, 이것을 버튼 하나로 전환해 주는 Chrome 확장을 만들어 보았습니다.
Chromium 기반 Edge에서도 작동이 확인되었습니다.
이 페이지의 끝에서 github에서 다운로드 할 수 있도록 했으므로 관심이 있으시면 사용하십시오.
Microsoft docs 예제:
htps : // / cs. mic로소 ft. 코 m / 쟈 jp / 언트네 /
htps : // / cs. 미 c 로소 ft. 코 m / En-u s / Intsune /
자체 제작 추가 기능 :
경위
직업 Microsoft 페이지를 참조하는 경우가 많습니다만, 이하의 때에 영어로부터 일본어로 변환하는 것이 미묘하게 귀찮습니다.
직업 Microsoft 페이지를 참조하는 경우가 많습니다만, 이하의 때에 영어로부터 일본어로 변환하는 것이 미묘하게 귀찮습니다.
사쿠토 일영 변환해 주는 애드인이 있으면 편리하다고 생각해 작성에 이르렀습니다.
했던 일
좋은 시대이므로 인터넷상의 여러분은 해 본 계의 기사에서 상세하게 구현 방법을 설명해 주시고 있습니다만,
빨리 만들고 싶었기 때문에, 누군가가 공유되고 있던 코드를 둥글게 박아 주셔, 필요한 곳만 바꿨습니다.
개발 환경은?
개발 환경은 필요없고, 폴더를 준비해 매니페스트인 manifest.json 과 실처리를 쓰는 background.js, 나중에 아이콘이나 약속계의 파일을 두면 준비 완료입니다.
매니페스트 파일
내가 변경한 것은 이름이나 제목의 변경과,
이번에는 탭 조작 및 메뉴 표시를 위해 permissions를 추가했습니다.
manifest.json{
"name": "en-us to ja-jp",
"version": "0.0.5",
"manifest_version":2,
"description": "/en-us/ -> /ja-jp/",
"permissions": [
"activeTab",
"tabs",
"contextMenus"
],
"background":{
"scripts": ["background.js"]
},
"page_action": {
"default_icon": "off19.png",
"default_title": "Language Change"
},
"icons" : {
"128": "128.png"
}
}
실제 처리
아래와 같은 느낌으로, 버튼 누르면 URL 을/ja-jp/인가/en-us/로 Replace 하고 페이지 갱신하는 것 뿐입니다.
background.jsconst JA_URL = "/ja-jp/";
const EN_URL = "/en-us/";
(function(){
// メニュー作成
const JEID = "jatoen";
const EJID = "entoja";
chrome.contextMenus.create({title: "ja-jp to en-us", id: JEID, contexts: ["all"]});
chrome.contextMenus.create({title: "en-us to ja-jp", id: EJID, contexts: ["all"]});
chrome.contextMenus.onClicked.addListener(function (info, tab) {
if ( info.menuItemId == JEID ) {
replaceUrl(tab, JA_URL,EN_URL);
}
else if ( info.menuItemId == EJID ) {
replaceUrl(tab, EN_URL,JA_URL);
}
});
// tab がアップデートされたとき
chrome.tabs.onUpdated.addListener(function(tabId){
// ページアクションを出す
chrome.pageAction.show(tabId);
})
// ページアクションアイコンをクリックしたときの挙動
chrome.pageAction.onClicked.addListener(function(tab){
replaceUrl(tab,EN_URL,JA_URL);
});
})();
function replaceUrl(tab, oldstr, newstr) {
var newurTmp = tab.url.replace(oldstr,newstr);
if (newurTmp != tab.url) {
chrome.tabs.update(tab.id, {url: newurTmp}, null);
}
}
설치 방법
{
"name": "en-us to ja-jp",
"version": "0.0.5",
"manifest_version":2,
"description": "/en-us/ -> /ja-jp/",
"permissions": [
"activeTab",
"tabs",
"contextMenus"
],
"background":{
"scripts": ["background.js"]
},
"page_action": {
"default_icon": "off19.png",
"default_title": "Language Change"
},
"icons" : {
"128": "128.png"
}
}
const JA_URL = "/ja-jp/";
const EN_URL = "/en-us/";
(function(){
// メニュー作成
const JEID = "jatoen";
const EJID = "entoja";
chrome.contextMenus.create({title: "ja-jp to en-us", id: JEID, contexts: ["all"]});
chrome.contextMenus.create({title: "en-us to ja-jp", id: EJID, contexts: ["all"]});
chrome.contextMenus.onClicked.addListener(function (info, tab) {
if ( info.menuItemId == JEID ) {
replaceUrl(tab, JA_URL,EN_URL);
}
else if ( info.menuItemId == EJID ) {
replaceUrl(tab, EN_URL,JA_URL);
}
});
// tab がアップデートされたとき
chrome.tabs.onUpdated.addListener(function(tabId){
// ページアクションを出す
chrome.pageAction.show(tabId);
})
// ページアクションアイコンをクリックしたときの挙動
chrome.pageAction.onClicked.addListener(function(tab){
replaceUrl(tab,EN_URL,JA_URL);
});
})();
function replaceUrl(tab, oldstr, newstr) {
var newurTmp = tab.url.replace(oldstr,newstr);
if (newurTmp != tab.url) {
chrome.tabs.update(tab.id, {url: newurTmp}, null);
}
}
htps : // 기주 b. 코 m / 난메이 365 / 난메이 st
Reference
이 문제에 관하여(MS 사이트의 docs 및 support 페이지 언어를 변환하는 Chrome 확장 프로그램을 만들려고했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nanmei365/items/4eb36113152d53ebab6f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)