ある晩、仕事を辞めて、ここで興味深い記事に出会いました。 私は印刷版を読むのが好きで、時間はすでに遅かったので、家に帰りたいと思っていましたが、読みたいと思いました-私は道路で印刷して読むことにしました。
さて、私はタイピングに入りました、ブラウザは35ページ以上印刷することを提案しましたが、20ページはどこにありますか？ 事実は、報道機関がすべての要素に沿って行ったため、投稿がそれぞれ狭くなり、コメントが同じになったということです。
私は他のオプションを探し始めましたが、habrahabrを初めて使いましたが、見つけることができませんでしたが、印刷版のようなものは見つかりませんでした。それほどではなく、それらのコメントは残り、テキストは狭かったので、結局、このサイトの記事をワンクリックで印刷するには何かが必要だという結論に達しました。
したがって、Google Chromeブラウザーの拡張機能である
HabraPrintが誕生し
ました 。
あなたに必要なのは、1つのボタンを押して印刷することです。
これは私の最初の拡張機能であり、最初の投稿でもあります。私が間違いを犯した箇所を修正してくれることを願っています。
そして、内部にあるもの：
拡張機能の名前でフォルダーを作成し、後続のファイルを保存します。
次に、最初に
マニフェストファイルを作成します。
ここで、ブラウザに設定内容と許可を伝えます。
{ "name": "HabraPrint", "version": "0.1", "description": " habrahabr.ru", "icons": { "128": "img/icon_128.png", "64": "img/icon_64.png", "48": "img/icon_48.png", "32": "img/icon_32.png", "16": "img/icon_16.png" }, "minimum_chrome_version":"6.0", "permissions": [ "tabs","http://habrahabr.ru/*", "https://habrahabr.ru/*"], "background_page": "background.html", "content_scripts": [ { "js": [ "js/jquery-1.7.1.min.js","js/content.js" ], "css": ["css/content.css"], "run_at": "document_end", "matches": [ "http://habrahabr.ru/*", "https://habrahabr.ru/*" ] } ], "page_action": { "default_icon": "img/icon_19.png", "default_title": "HabrPrint" }, "options_page": "options.html" }
以下を示します。
name-拡張機能名
バージョン -現在のバージョン
説明 -拡張機能の説明
アイコン -拡張機能アイコンへのパスを指定<
キー /サイズ>：<
値 /画像へのパス>
minimum_chrome_version-ブラウザーの最小バージョンを示します
許可 -ここでは、アクセスする必要があるものを示します
background_page-バックグラウンドで実行されるページへのパスを指定します
content_scripts-ページに埋め込まれるファイルへのパスを指定します
page_action-このプロパティは、拡張ボタンがブラウザのアドレスバーに配置されることを示し、アイコンへのパスと名前を指定します
options_page-設定ページへのパス
ファイルの詳細な説明は
ドキュメントにあり
ますこのファイルは、指定されたすべてのファイルと同様に、拡張子ごとに必要です。
次にリストを移動します。
使いやすいように、ファイルを種類ごとにフォルダーに分類しました。
次のファイルは
background_pageを作成し
ます 。
<!DOCTYPE html> <html> <head> <script src="js/background.js"></script> </head> </html>
ご覧のとおり、ページフレームと、バックグラウンドでのアクションを担当するJavaScriptスクリプト接続のみがあります。
background.js chrome.tabs.onCreated.addListener(function(tab){ urlDetected(tab.id, null, tab); }); chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){ if(changeInfo.status=='complete'){ urlDetected(tabId, changeInfo, tab); } }); function urlDetected(tabId, changeInfo, tab){ chrome.tabs.getSelected(null,function(tab) { var re=/.+habrahabr.+\/(\d+)\//; if(re.test(tab.url)){ chrome.pageAction.show(tabId); }else{ chrome.pageAction.hide(tabId); } }); } chrome.pageAction.onClicked.addListener(function(tabId) {
このファイルでは、タブを作成および更新するためのイベントハンドラーをハングアップし、URLでドメインと番号の存在を確認します（チェックを使用して、ユーザーが投稿のあるページにいるかどうかを
理論的に判断します）。これに基づいて、拡張機能アイコンを表示または非表示にします。 したがって、拡張子は
理論的には投稿のあるページにのみ表示されます。
次に、アプリケーションのボタンをクリックしてハンドラーを切断し、拡張機能の設定に基づいてアクションを実行します。
設定では、同じウィンドウで印刷するか、ポップアップで印刷するかを選択できますが、それについては後で詳しく説明します。
ポップアップウィンドウの呼び出しでは、このファイル（background_page）のみを実行することが許可されていたため、同じウィンドウを表示する機能を以下に示します。
function PrintIt(){ if(wnd){ wnd.close(); } stext=''; chrome.tabs.getSelected(null, function(tab) { chrome.tabs.sendRequest(tab.id, { type:'returnHtml' }, function(response) { stext=response.html; wnd=window.open("", "habrPrint", 'statusbar=no,toolbar=no,scrollbars=yes,resizable=yes''); wnd.document.write("<!DOCTYPE html>\ <html lang='ru'>\ <head>\ <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>\ <meta content='ru' name='language'>\ <title>"+response.title+"</title>\ <link href=\"/css/print.css\"rel=\"stylesheet\"type=\"text/css\" media=\"all\"/></style>\ </head>\ <body onclick=\"window.close()\">\ <div class='post'>"); wnd.document.write(stext); wnd.document.write("</div><body></html>"); wnd.document.close(); setTimeout(function(){ wnd.print(); wnd.close(); }, 100) }); }); }
次に、機能をもう少し明確に短縮しました。 ご覧のとおり、通常のwindow.openが使用され、htmlが投稿テキストのあるページから転送されます。 テキストを取得するには、アクションの名前を含むリクエストをコンテンツスクリプトに送信し、それに応じて投稿のinnerHTMLを取得し、wnd.document.write（）ウィンドウに書き込みます。
次に、コンテンツスクリプトを記述します。
var getElementsByClassName = function(getClass){ if(document.querySelectorAll) { return document.querySelectorAll("." + getClass); } else if(document.getElementsByClassName) { return document.getElementsByClassName(getClass); } else { var list = document.getElementsByTagName('*'), i = list.length, classArray = getClass.split(/\s+/), result = []; while(i--) { if(list[i].className.search('\\b' + classArray + '\\b') != -1) { result.push(list[i]); } } return result; } }; function pageCleaner(){ $('body *').removeClass('habrNoPrint').removeClass('habrPrint'); } function printSame(){ $('body *').addClass('habrNoPrint'); $('#layout, .content_left, .company_post, .post, .post *').removeClass('habrNoPrint'); $('.content_left').addClass('habrPrint'); window.print(); window.setTimeout(pageCleaner, 0); } chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { if(request.type == 'print-same'){ printSame(); } if(request.type == 'returnHtml'){ var elem=getElementsByClassName('post')[0]; var title=document.getElementsByTagName('title')[0]; sendResponse({'html':elem.innerHTML,'title':title.innerHTML}); } });
ここでリクエストリスナを配置し、リクエストリスナを受信すると、パラメータで指定されたアクションを実行します。
前のスクリプトにhtmlポストを与えるか、印刷を担当する関数を実行するかの2つのアクションしかありません。 この関数では、印刷にスタイルを使用します。つまり、印刷するものと隠すものをスタイルで示します。
最後に、設定ページを作成します。
options.htmlでページフレームを作成します
<!DOCTYPE html> <html lang='ru' xml:lang='ru' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta content='text/html; charset=utf-8' http-equiv='Content-Type'> <meta content='ru' name='language'> <style>@import "css/options.css";</style> <script src="js/options.js"></script> </head> <body> <header> <h3>:</h3><span id="options_callback"></span> </header> <div id='habrPrint_options'> <form name="habr_options_form"> <div class='options_form'> <div> <input id="radio_popup" type="radio" name="window" value='popup' checked="checked"/> <label id="append-label"> </label> <p> </p> </div> <div> <input id="radio_same" type="radio" name="window" value='same' /> <label id="append-label"> </label> <p> , , 5- </p> </div> </div> </form> <div class="button"> <div class="button_blue"> <button id="save"></button> </div> </div> </div> </body> </html>
印刷モードと保存ボタンを設定するラジオボタンは数個しかありません。スタイルは
css / options.cssに示されていますが、ここでは説明しません。
そこで、このページが出ました：
options.jsファイルに、設定の保存を担当するjavascriptを記述します。
function getRadioGroupValue(radioGroupObj) { for (var i=0; i < radioGroupObj.length; i++) if (radioGroupObj[i].checked) return radioGroupObj[i].value; return null; } function readProperty(property, defValue) { if(localStorage[property] == null) { return defValue; } return localStorage[property]; } window.addEventListener("load", function(){ chrome.tabs.getSelected(null, function(tab) { var save = document.getElementById("save"); if(localStorage["radio"]){ document.getElementById("radio_"+localStorage["radio"]).checked =readProperty("radio", false); } save.addEventListener("click", function(){ var radio_value = getRadioGroupValue(document.habr_options_form.window); localStorage["radio"] = radio_value; if(localStorage["radio"]){ var sum=document.getElementById('options_callback'); sum.innerHTML=' ' } }); }); });
保存ボタンをクリックしてハンドラーを停止し、その上のlocalStorageオブジェクトに値を入力します。
localStorageは、「名前」、「値」のペアを格納する連想配列です。 値を保存するには、次のように記述します。
localStorage["radio"] = radio_value;
原則として、ブラウザに拡張機能をロードするために残っているのはそれだけです。
[拡張機能の管理]タブ（[ツール]-> [拡張機能]）に移動し、[開発者モード]をオンにして、解凍した拡張機能をロードします。
拡張機能を使用するには、habrahabrの投稿を開き、ブラウザのアドレスバーに表示される拡張機能アイコンをクリックします。
問題は次のとおりです。拡張機能を最初にダウンロードしたときに、「タブの機能を使用すること、マニフェストを確認することは許可されていません」などのエラーが表示されたことに気付きました。そのため、私はまだ理解できませんでした、私が説明すると、感謝します。
ソース：
Google Chrome拡張機能のよくある質問Google Chromeの拡張機能を作成する拡張子：
ダウンロードするPS残念ながら、拡張機能の記述に関する私のわずかな知識では、作成プロセスをより詳細に説明することはできませんが、この拡張機能が誰かに役立つことを願っています。
また、提案、編集、コメントも聞きたいです。 よろしくお願いします。
UPD ：
bo883のリクエストで、構文の強調表示を追加し、コードに透かしを追加しました（これまでは「ポップアップウィンドウ」でのみ機能しますが、同じウィンドウで印刷するときにすぐに追加します）。 実装するときに、cssを介して追加された背景がChromeを印刷しないという問題に遭遇しましたが、写真を完全に印刷します（<img ...>）。これに基づいて、コードでブロックに写真を追加し、その幅と高さをコードブロックのサイズに等しく設定し、それを自分でブロック全体に伸ばし、z-indexで変更してコードの下に画像を配置します。その結果、印刷時にコード領域に下地があります。 （
拡張機能が更新されました）