Chrome 확장, AWS Harson의 양식 입력 자동화

날과 씨
AWS에서 아무것도 모르는 엔지니어@gramin입니다.
AWS를 배울 시간이 얼마 남지 않았을까 생각하면서 동료에게 물어봤더니 "하슨이 드디어 합격했으니 좋잖아"라는 대답이 나와 아무 생각 없이 실행됐다.
자료.
https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-hands-on/
신청서에 회사 정보 등을 입력해 보내면 한센 영상을 볼 수 있다.
마이그레이션된 URL을 숨기면 나중에 비디오를 볼 수도 있습니다.
장애물 경기를 실시할 때 큰 문제에 부딪힐 수 있다.그건...
같은 정보를 여러 번 입력하고 싶지 않은 문제(엔지니어는 쓸데없는 일을 가장 싫어한다)
같은 동영상이라면 숨기면 되지만 보고 싶은 영상이 많아요.
입력 내용마다 똑같아요. 입력 항목이 20개가 안 돼서 매번 입력할 때마다 귀찮아요.
그래, 자동화하자.
의 목적

AWS 휴대용 폼 입력 간소화

Qita 운영에 화를 내지 않기 위해 엔지니어의 글을 쓴다

크롬을 확장하고 싶어요

이렇게 하자!
만든 물건
Chrome 확장 자동 AWS 휴대용 폼 입력
https://github.com/ama-gramin/hands-on-automation
포장되지 않았습니다. 수동으로 추가해야 합니다.
원래 입력한 정보는 js의 출처에 쓰이기 때문에 포장할 수 없습니다.(입력 화면 불필요)
JavaScript는 독학으로 외우기만 하기 때문에 쓰기 방법에 나쁜 코드가 쓰여 있을 수 있습니다.
사용법
Clone 창고

$ git clone [email protected]:ama-gramin/hands-on-automation.git

크롬 확장에 추가

설정 > 확장 기능

개발자 모드 열기

포장되지 않은 읽기 확장 기능

Clone의 디렉토리 선택

추가됨
아이콘은 ICOOON MONO에서 빌렸다.
새우를 선택한 이유는'귀엽다'뿐이다.충분한 이유야.
열린 페이지 표시
시작 페이지가 열리면 확장 버튼이 표시됩니다.
예를 들면 이 일대.
1단계:AWS 계정 제작 & IAM 기본 열쇠

나는 확장 버튼으로 고정하면 매우 편리할 것이라고 생각한다.새우가 귀엽다.
확장 버튼 열기(작업 확인)

이런 느낌으로 정보를 입력하세요.
참고로 사용 약관에 동의하는 복선상자는 목적의 무선 단추를 사용하려면 스스로 선택해야 한다.
입력 정보 수정
위에서 말한 바와 같이, 이렇게 하면 샘플의 정보를 입력할 것이다.https://pages.awscloud.com/ 자신으로 변경된 정보를 엽니다.

참고로 입력 형식은 여러 가지가 있는데 그 중에서 세 가지가 정의되어 있다.
듣고 싶은 동영상에 따라 정보를 입력하십시오.constants.js가 포함된 URL이 입력 객체가 됩니다.(후술)
콤보 상자 정보를 변경하려면
개발 모드에서 요소를 확인한 후value값을 줍도록 하겠습니다.

소스 코드 다시 로드
수정이 끝난 후 확장된 설정 페이지를 열고 URL_TYPEX의 업데이트 단추를 엽니다.
이거 안 하면 업데이트 반영 안돼.
핸드헬드 페이지 새로 고침
확장을 업데이트한 후 목표 페이지를 다시 불러와야 합니다.
페이지를 읽을 때 확장된 js를 실행하기 때문일 수 있습니다.
그런 다음 작업을 확인할 때와 마찬가지로 확장 버튼을 사용하여 정보를 입력합니다.
잘 됐다!이렇게 하면 회사 전화번호를 외울 필요가 없다!!
소스 코드 설명
manifest.json
정의 파일을 확장합니다.
[구조 단순] 브라우저 동작 버튼에서 불이 나는 자체 제작 크롬 확장 기능의 제작 방법 & 샘플
이쪽 기사를 참고해서 무심결에 나왔어요.

"icons": {
    "32": "icon_32.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
},

새우 새우
확장 기능의 설정 페이지에 표시되는 것 (대략적)

"content_scripts": [{
    "matches": ["https://pages.awscloud.com/*"],
    "js": [
      "constants.js",
      "main.js"
    ]
}],

실행 대상의 URL 및 읽는 js 파일
버튼이 없으면 자동으로 실행되는 확장 기능을 저장소로 설정합니다

"background": {
    "scripts": [
        "background.js"
    ]
},

확장 단추를 실행할 때 호출하는 처리를 정의합니다

"browser_action": {
    "default_icon": "icon_32.png",
    "default_title": ""
}

새우 새우
버튼 설정
background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.sendMessage(tab.id, "Action");
});

사이트 축소판 그림まままま
확장 버튼을 누르면 메시지 보내기hands-on extension 수령
constants.js

const URL_BASE = 'https://pages.awscloud.com/';
const URL_TYPE1 = URL_BASE + 'event_JAPAN_Ondemand_Hands-on-for-Beginners-';
const URL_TYPE2 = URL_BASE + 'JAPAN-event-OE-Hands-on-for-Beginners-';
const URL_TYPE3 = URL_BASE + 'event_JAPAN_Hands-on-for-Beginners-';

위에서 설명한 바와 같이 URL에 따라 다양한 형식의 양식이 있습니다.
여기에는 main.js에 사용할 지점이 정의되어 있습니다.

const COLUMNS_TYPE1 = {
    // 姓
    LastName: '名字',
    // 名
    FirstName: '名前',

입력 값 정의
ID의 설정값을 키로
위 URL 모드와 연관된 형식으로 main.js 정의됨
main.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (request == "Action") {
        inputForm();
    }
});

COLUMNS_TYPEX에서 보낸 메시지의 수신background.js의 값이 request라면 폼 입력

let columns;

if (location.href.match(URL_TYPE1)) {
    columns = COLUMNS_TYPE1;
} else if (location.href.match(URL_TYPE2)) {
    columns = COLUMNS_TYPE2;
} else if (location.href.match(URL_TYPE3)) {
    columns = COLUMNS_TYPE3;
}

if (!columns) {
    return
}

URL 형식으로 입력한 정보 변경
URL이 안 맞으면 아무것도 안 하고 끝이에요.

for (let id in columns) {
    const element = document.getElementById(id);
    if (element) {
        element.value = columns[id];
    }
}

ID 일치 요소 줍기
요소가 존재하면value 설정
반복 요소 끝
과제.

정보를 입력하면 js를 쓰는 것이 가장 좋다.

등록 정보가 있을 수 있는 화면

말은 그렇지만 한 번 설정하면 그 이후에도 아무런 변화가 없기 때문에 의욕도 없다

공부할 때 겸사겸사 하는 것도 괜찮을 것 같다

여러 모드를 설정해야 함

한 곳에서 상수를 정의하고 참조하는 것이 좋다

이것도'어차피 처음이니까'게으름 피웠어

그리고 조합상자의value가 좀 달라서 귀찮아요

새우

포장하려면 의미 있는 아이콘을 만들어야 한다

말은 그렇지만 새우는 귀엽다

최후
크롬 확장은 매우 간단하며 작업 자동화를 추천합니다.
세레니엄 IDE 같은 건 시간이 압도적으로 빠르지만.
하나하나 시동을 걸 시간이야, JS가 되려면 공부만으로도 충분해.
그럼 손으로 만든 애니메이션을 볼 때가 많지 않겠지......(처음 몇 초만 보기)