WebExtensions�FDev Basics�^Keyword

WebExtensions�́AMozilla��J��i�߂Ă��u��E�U�g��@�\�pAPI�BChrome�p��API�Ƃ̌݊��Ă��邽�߁A��܂��܂ȃu��E�U�œ��삷��g��@�\��쐬�ł��B

» 2017�N06��20�� 05��00�� J

WebExtensions�Ƃ�

�@WebExtensions�́AFirefox��̊g��@�\�i�G�N�X�e��V��j��HTML�^CSS�^JavaScript��p��Ď��邽�߂̐V��API�i�}�j�t�F�X�g�̌`��Ɋւ��d�l��JavaScript��痘�p�\�Ȋ֐��Ȃǂō\��j�BChrome�̊g��@�\�pAPI�Ƃ̌݊��邱�ƂŁAFirefox�݂̂Ȃ炸�AChrome��Opera�AEdge�ȂǁA�N��X�u��E�U�œ��삷��g��@�\��e�Ղɍ쐬�\�ł��i��邢�́A�ڐA��e�Ղɍs��j�B

�@�Ȃ��AFirefox�ňȑO��痘�p��Ă��XUL�^XPCOM�Ȃǂ̋Z�p�́A2017�N��T�|�[�g��I��AWebExtensions�֊��S�Ɉڍs��\��ƂȂ��Ă��B�]��̋Z�p��g��Firefox�p�̊g��@�\��쐬��Ă��ꍇ�ɂ́A��炩�̕��@��WebExtensions�Ɉڍs��K�v��B��̈��ŁAWebExtensions�ւ̈ڍs�́A�g��@�\�𑽂��̃u��E�U�ŋ��ʂɗ��p�ł��\��߂�Ƃ��B

�ȒP�Ȋg��@�\�̗�

�@WebExtensions API��g�p��āA�g��@�\��쐬��ɂ́A�ȉ��̃t�@�C��Œ��K�v�ɂȂ�B

manifest.json�t�@�C��

�@��̃t�@�C��ɂ́A��̊g��@�\�Ɋ֘A��e��̏��L�q��i��ۂɂ́A��̓��L�q��JavaScript�t�@�C��Ȃǂ��K�v�ɂȂ�j�Bmanifest.json�t�@�C��̊�{�I�ȍ\��v�f��ȉ��Ɏ��B

{
"manifest_version": 2,
"name": "my extension",
"version": "1.0",
"author": "insider.net",
"description": "insider.net web extension sample",

"content_scripts": [
    {
      "matches": ["*://*.atmarkit.co.jp/*"],
      "js": ["myextension.js"]
    }
]
}

manifest.json�t�@�C��̗�

�@��ł͈ȉ��̃t�B�[��h��w�肵�Ă��B�Ȃ��Amanifest.json�t�@�C��̏ڍׂɂ��Ắumanifest.json�v�y�[�W��Q�Ƃ��ꂽ��B

manifest_version�F �K�{�B�}�j�t�F�X�g�̃o�[�W��B��݂�2��ߑł�
name�F �K�{�B�g��@�\�̖��O
version�F �K�{�B�g��@�\�̃o�[�W��
author�F �g��@�\�̍�ҁiEdge�ł͕K�{�j
description�F �g��@�\�̐��
content_scripts�F �g��@�\��t�@�C��A��K�p��URL��w��

�@�K�{�̃t�B�[��h�͍ŏ��3��ł��iEdge�ł��삳��ɂ�author�t�B�[��h�̎w��K�{�j�B��āAFirefox�AChrome�AEdge�œǂݍ��݉\�ȍł��V��v��Ȋg��@�\��manifest.json�t�@�C��͎��̂悤�ɂȂ�B

{
"manifest_version": 2,
"name": "my extension",
"version": "1.0",
"author": "insider.net"
}

��ԃV��v��ȃ}�j�t�F�X�g

�@��A��ł͈Ӗ��̂��邱�Ƃ͉��s��Ȃ��B��ۂɉ��炩�̏��ɂ́u�R��e��c�X�N��v�g�v��w�肷��K�v��B��̂��߂̃t�B�[��h��ɂ��content_scripts�t�B�[��h�ł��B��̃t�B�[��h�ł́A�g��@�\��K�p��URL�̃p�^�[��matches�t�B�[��h�ŁA�g��@�\�̓��L�q��t�@�C��js�t�B�[��h�Ɏw�肷��B��قǂ̃R�[�h�ł́A��͈ȉ��̂悤�ɂȂ��Ă��B

"content_scripts": [
{
"matches": ["*://*.atmarkit.co.jp/*"],
"js": ["myextension.js"]
}
]

content_scripts�t�B�[��h

�@matches�t�B�[��h�͕K�{�̗v�f�ł��A��ł́u["*://*.atmarkit.co.jp/*"]�v�Ƃ��Ă��B��́uatmarkit.co.jp�ȉ��URL�ŎQ�Ƃ��Web�y�[�W�ł́A"js"�t�B�[��h�Ŏw�肳�ꂽJavaScript�t�@�C��ǂݍ��܂��v��Ƃ��Ӗ��Bjs�t�B�[��h�ɂ́A��̊g��@�\�̐U�镑��L�q��t�@�C��w�肷��B

�@�Ⴆ�΁Amyextension.js�t�@�C��̓��e��ȉ��̂悤�Ȃ��̂��Ƃ��悤�B��̃R�[�h�́A�ŏ��<h1>�v�f�̔w�i�F�𐅐F�ɕύX��邾��̂��̂��B

var elem = document.getElementsByTagName("h1");
if (elem) {
elem[0].style.backgroundColor = "lightblue";
}

�g��@�\��JavaScript�R�[�h

�@�ŏ��Ɏ��manifest.json�t�@�C��myextension.js�t�@�C��K��ȃf�B��N�g��ɔz�u��āA��Firefox�AChrome�AEdge�œǂݍ��܂��Ă݂悤�B�܂��Firefox�œǂݍ��܂��菇��Љ��BFirefox�ł̓A�h��X�o�[�Ɂuabout:debugging�v��͂��ƁA��̉�ʂ��\��B

�A�h�I��̐ݒ��

�@��Łm�ꎞ�I�ȃA�h�I��ǂݍ��ށn�{�^��N��b�N��ƁA�t�@�C��I�[�v��_�C�A��O��\��̂ŁAmanifest.json�t�@�C��myextension.js�t�@�C��̂��ꂩ��I��B�G��[��Ȃ��΁A�g��@�\�̓ǂݍ��݂��s��A��̂悤�Ɂu�ꎞ�I�Ȋg��@�\�v�Ƃ��ĕ\��B

$�ꎞ�I�Ȋg��@�\�Ƃ��āumy extension�v�g��@�\��ǂݍ��$ �ꎞ�I�Ȋg��@�\�Ƃ��āumy extension�v�g��@�\��ǂݍ��

�@��̏�ԂŁA��IT�̓K��ȃy�[�W��J��ƁA��̂悤��<h1>�v�f�̔w�i�F��ω��邱�Ƃ��B

$�g��@�\�ɂ��āA�y�[�W�ɂ��擪��<h1>�v�f�̔w�i�F��ύX��ꂽ$ �g��@�\�ɂ��āA�y�[�W�ɂ��擪��<h1>�v�f�̔w�i�F��ύX��ꂽ

�@��̊g��@�\��WebExtensions�ɏ]��č쐬��Ă��̂ŁA��A�N��X�u��E�U�œ��삷��i��x�ɃV��v��Ȃ��̂��j�B��ŁAChrome��Edge�ł��ǂݍ��ł݂悤�B

�@Chrome�ł́A�A�h��X�o�[�̉E�[�ɂ��mGoogle Chrome �̐ݒ�n�{�^��N��b�N��āA�\��ꂽ��j��[��m��̑��̋@�\�n�|�m�g��@�\�n��I��B��Ɓm�g��@�\�n�^�u��\��̂ŁA��g��@�\��ǂݍ��߂΂悢�B

$�g��@�\�̓ǂݍ��݁iChrome�̏ꍇ�j$ �g��@�\�̓ǂݍ��݁iChrome�̏ꍇ�j

�@Edge�ł́A�A�h��X�o�[�̉E�[�ɂ��m�ݒ�Ȃǁn�{�^��N��b�N��āA�\��ꂽ��j��[��m�g��@�\�n��I��B��ƃE�B��h�E�E��Ɂm�g��n�y�[��\��̂ŁA��g��@�\��ǂݍ��߂΂悢�B�Ȃ��AEdge�ł̓u��E�U�̍ċN��K�v�ɂȂ�B�܂��A��̂Ƃ��Ɂu��s��s��Ŋ댯�Ȃ̂Ŗ��v�Ƃ��̂ŁA�g��@�\��炽�߂ėL��K�v��i�ȉ��̉摜�͊g��@�\��ɗL��ɂȂ��Ă��ʂ��L��v�`��[��́BEdge�ł��̊g��@�\��삵�Ă��邱�Ƃ��j�B

$�g��@�\�̓ǂݍ��݁iEdge�̏ꍇ�j$ �g��@�\�̓ǂݍ��݁iEdge�̏ꍇ�j

�@�g��@�\��L��ȏ�ԂŁA��IT�̓K��ȃy�[�W��J��΁A��قǂ�Firefox�̏ꍇ�Ɠ��l��<h1>�v�f�̔w�i�F��ω��͂��B

�@��ł͊ȒP�Ȋg��@�\��쐬��āAFirefox�AChrome�AEdge�œ��삳��Ă݂��BWebExtensions API�i��O�[�O��chrome.extension API�j��g�p��邱�ƂŁA�N��X�u��E�U�œ��삷��g��@�\��쐬�ł��邱�Ƃ��͂��B�{�e�ł́AWebExtensions�ŋK�肳��Ă��@�ɂ̂��Ƃ��manifest.json�t�@�C��쐬��A�s��A��JavaScript�R�[�h��x��A��ۂɂ́uJavaScript API �Q�v�y�[�W�ŏЉ��Ă��JavaScript��A�N�Z�X�\�Ȋ֐��Ȃǂ��񋟂��Ă��B��Ȃ��ɂ��ẮAMozilla�́uWebExtensions�v�y�[�W��O�[�O��́uWhat are extensions?�v�y�[�W�Ȃǂ��Q�l�ɂ��Ăق��B