Hey, 野声!

作为 Markdown 翻译专家，您需要特别注意保持所有 Markdown 语法和标记的完整性，不改变 HTML 标记的功能，以确保翻译内容不影响任何语法或标记的呈现。请遵循以下规则进行翻译：

1. 识别和翻译文本内容：只识别和翻译 Markdown 中的纯文本内容，包括标题、段落和列表项中的文本。

2. 保留标记和属性：遇到 HTML 标记（如、

3. 特殊语法处理：对于 Markdown 特定的语法（如链接、图像标记），只翻译描述性文本部分（如 alt 文本），不改变链接或语法结构。

4. 保持格式不变：确保所有 Markdown 格式（如粗体、斜体、代码块）在翻译过程中保持不变。

5. 您的任务是确保翻译内容既准确又不破坏原始的 Markdown 结构和 HTML 标记的功能。请在翻译过程中仔细检查，确保语法和标记的正确呈现。

6. 您只能返回翻译后的文本，不能返回其他内容。

1. 识别和翻译文本内容：只识别和翻译 Markdown 中的纯文本内容，包括标题、段落和列表项中的文本。

2. 保留标记和属性：遇到 HTML 标记（如、等），请仅翻译标记中的可见文本（如 alt 属性中的文本），并保留所有标记、属性名称和链接地址不变。

3. 特殊语法处理：对于 Markdown 特定的语法（如链接、图像标记），只翻译描述性文本部分（如 alt 文本），不改变链接或语法结构。

4. 保持格式不变：确保所有 Markdown 格式（如粗体、斜体、代码块）在翻译过程中保持不变。

5. 您的任务是确保翻译内容既准确又不破坏原始的 Markdown 结构和 HTML 标记的功能。请在翻译过程中仔细检查，确保语法和标记的正确呈现。

6. 您只能返回翻译后的文本，不能返回其他内容。

1. テキストコンテンツの識別と翻訳：Markdown のプレーンテキストコンテンツのみを識別して翻訳してください。これには、見出し、段落、リスト項目のテキストなどが含まれます。

2. タグと属性の保持：HTML タグ（、など）に遭遇した場合、タグ内のユーザーが見えるテキスト（alt 属性内のテキストなど）のみを翻訳し、すべてのタグ、属性名、およびリンクアドレスを変更せずに保持してください。

3. 特殊な構文の処理：Markdown 固有の構文（リンク、画像タグなど）の場合、リンクや構文の構造を変更せずに、説明的なテキスト部分（alt テキストなど）のみを翻訳してください。

4. フォーマットを変更せずに保持：すべての Markdown フォーマット（太字、斜体、コードブロックなど）が翻訳中に変更されないようにしてください。

5. 翻訳されたコンテンツが正確であり、元の Markdown 構造と HTML タグの機能が壊れないことを確認することがあなたの仕事です。構文とタグの正しいレンダリングを確認するため、注意深くチェックしてください。

6. 翻訳されたテキストのみを返すことができます。他の内容は返してはいけません。

私はフロントエンド開発者であり、自分のブラウジング体験を向上させるために、時折ユーザースクリプト1を書くことがあります。

従来のサーバーサイドレンダリングのページでは、自分の目的を達成するために直接スクリプトをページ上で実行することができましたが、現在のデータフロードリブンのフロントエンド開発フレームワークでは、以前の方法は機能しません。ページのレンダリングに参加するための方法を見つける必要があります。

では、Angular ページをどのようにハック（実際には変更）できるのでしょうか？

まず、私は React を書いていることを言っておきます。間違いがあればご指摘ください。

Angular インスタンスの取得#

Google で長い間検索しましたが、次のgistを見つけました。これを使って Angular のインスタンスを直接取得できます。

コードの説明です：
angular は自分自身をwindow.angularに注入するため、angular.elementメソッドを呼び出して Angular オブジェクトを生成できます。

gist のヒントに従ってコードスニペットを実行します。

Angular のインスタンスを取得できれば、ページのデータフローをデバッグ分析するのは簡単です。rootScopeでwatchを行い、対応するscopeを取得して変更します。

ページのデータフローの分析#

通常、このユーザーアクションボタンをクリックすることはできません。なぜなら、属性内のdisableがtrueに設定されているためです。このボタンの DOM を選択し、コンソールで$scopeを入力すると（gist のコメントに従ってページでコードスニペットを実行する必要があります）、情報が表示されます。

$scope.disabled = falseと変更して、ボタンをクリックすることができます。

しかし、別のページに切り替えて戻ってくると、再びクリックできなくなります。根本的な原因は、最も内側のデータフローに影響を与えていないからです。

ページの変更を監視し、常にデータを変更する#

以下のスクリプトは、当時 StackOverflow の Angular ウォッチに関する質問を参考にしましたが、リンクが見つからないため、出典を明記できませんでした。申し訳ありません。

では、ユーザースクリプトで Angular オブジェクトをどのように取得できるのでしょうか？

var retryCount = -1,
  maxRetry = 5,
  timeout = 1000,
  timer;
(function initScript() {
  window.clearTimeout(timer);
  if (!window.angular) {
    retryCount++;
    if (retryCount < maxRetry) {
      timer = setTimeout(initScript, timeout);
    }
    return;
  }
  setTimeout(injectScript, 1000);
})();

Angular の読み込みが成功するまでブロックし、injectScriptを実行します。

function injectScript() {
  var ngAppElem = angular.element(
    document.querySelector('[ng-app]') || document
  );
  $rootScope = ngAppElem.scope();
  $rootScope.$watch(function () {
    // 何かを実行する。
  });
}

rootScopeでwatchを実行し、ページの切り替えによってwatchが失われないようにします。

function injectScript() {
  var ngAppElem = angular.element(
    document.querySelector('[ng-app]') || document
  );
  $rootScope = ngAppElem.scope();
  $rootScope.$watch(function () {
    var elem = angular.element(
      document.querySelector(
        '#dashboardmainpart > div > div.EventBottomChartsContainer > div.EventDetailContainer > div > ul > li:nth-child(3)'
      )
    );
    var s1 = elem.isolateScope() || elem.scope();
    if (s1) {
      s1.disabled = false;
      return s1.disabled;
    }
    return s1;
  });
}

必要な場所のスコープを取得し、直接変更します。
ページが変更されるたびにwatch関数が実行されます。

完全なデモは以下を参照してください：